React-এ প্যারেন্ট স্টেট চাইল্ড কম্পোনেন্টে এডিট করা

এখন আসুন আমরা আমাদের পণ্যগুলি এডিট করি ইনপুট ব্যবহার করে। এটি করার জন্য চাইল্ড কম্পোনেন্টে একটি বাটন তৈরি করি।

এই বাটনে প্রথম ক্লিক করলে পণ্যের নাম এবং দামের পরিবর্তে সেগুলি এডিট করার জন্য ইনপুট দেখা যাক, এবং দ্বিতীয় ক্লিকে ইনপুটের পরিবর্তে আবার টেক্সট দেখানো যাক।

পণ্যের অ্যারেতে পরিবর্তন করি, যোগ করি isEdit প্রপার্টি (এবং সহজতার জন্য কার্টের কাজ এখানে সরিয়ে ফেলি):

jsxconst initProds = [
  {id: id(), name: 'product1', cost: 100, isEdit: false},
  {id: id(), name: 'product2', cost: 200, isEdit: false},
  {id: id(), name: 'product3', cost: 300, isEdit: false},
];

Product কম্পোনেন্ট

পণ্যে একটি এডিট বাটন তৈরি করি:

jsxfunction Product({ id, name, cost, isEdit }) {
  return <div>
    name: <span>{name}</span>
    cost: <span>{cost}</span>
    <button>edit</button>
  </div>;
}

এই বাটনে ক্লিক করলে যেন toggleMode নামক একটি ফাংশন কল হয়, সেটা করি, যা প্যারেন্ট কম্পোনেন্ট থেকে পাস করা হবে:

jsxfunction Product({ id, name, cost, isEdit, toggleMode }) {
  return <div>
    name: <span>{name}</span>
    cost: <span>{cost}</span>
    
    <button onClick={() => toggleMode(id)}>
      edit
    </button>
  </div>;
}

আমাদের এখনও toggleMode-এর বাস্তবায়ন নেই, কিন্তু আমরা জানি, এটি থাকবে প্যারেন্ট কম্পোনেন্টে, প্যারামিটার হিসেবে নিবে পণ্যের id এবং isEdit প্রপার্টি বিপরীত করে দিবে।

আসুন এটাও করি যাতে বাটনের টেক্সট প্রতিবার ক্লিকে পরিবর্তন হয়:

jsxfunction Product({ id, name, cost, isEdit, toggleMode }) {
  return <div>
    name: <span>{name}</span>
    cost: <span>{cost}</span>
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'save': 'edit'}
    </button>
  </div>;
}

এখন করি যেন এডিট মোডে ডেটা সহ ইনপুট দেখা যায়, আর সাধারণ মোডে - স্প্যান:

jsxfunction Product({ id, name, cost, isEdit, toggleMode }) {
  return <div>
    name: {isEdit ? <input value={name} /> : <span>{name}</span>}
    cost: {isEdit ? <input value={cost} /> : <span>{cost}</span>}
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'save': 'edit'}
    </button>
  </div>;
}

আমাদের ইনপুটগুলিতে onChange ইভেন্ট বাঁধি, যাতে একটি প্যারেন্ট ফাংশন editProd কল হয়:

jsxfunction Product({ id, name, cost, isEdit, toggleMode, editProd }) {
  return <div>
    name: {
      isEdit
      ? <input value={name} onChange={event => editProd(id, 'name', event)} />
      : <span>{ name }</span>
    }
    cost: {
      isEdit
      ? <input value={cost} onChange={event => editProd(id, 'cost', event)} />
      : <span>{ cost }</span>
    }
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'save': 'edit'}
    </button>
  </div>;
}

Products কম্পোনেন্ট

এখন Products কম্পোনেন্টে যাই। এতে toggleMode ফাংশন বাস্তবায়ন করি:

jsxfunction toggleMode(id) {
  setProds(prods.map(prod => {
    if (prod.id === id) {
      prod.isEdit = !prod.isEdit;
    }
    
    return prod;
  }));
}

এছাড়াও এতে editProd ফাংশন বাস্তবায়ন করি:

jsxfunction editProd(id, field, event) {
  setProds(prods.map(prod => {
    if (prod.id === id) {
      prod[field] = event.target.value;
    }
    
    return prod;
  }));
}

পণ্যের ট্যাগে আমাদের ফাংশন toggleMode এবং editProd অ্যাট্রিবিউট হিসেবে পাস করি:

jsxconst items = prods.map(prod => {
  return <Product
    key ={prod.id}
    id  ={prod.id}
    name={prod.name}
    cost={prod.cost}
    isEdit={prod.isEdit}
    toggleMode={toggleMode}
    editProd={editProd}
  />;
});

Products কম্পোনেন্টের চূড়ান্ত কোড নিম্নরূপ হবে:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  function toggleMode(id) {
    setProds(prods.map(prod => {
      if (prod.id === id) {
        prod.isEdit = !prod.isEdit;
      }
      
      return prod;
    }));
  }
  
  function editProd(id, field, event) {
    setProds(prods.map(prod => {
      if (prod.id === id) {
        prod[field] = event.target.value;
      }
      
      return prod;
    }));
  }
  
  const result = prods.map(prod => {
    return <Product
      key ={prod.id}
      id  ={prod.id}
      name={prod.name}
      cost={prod.cost}
      isEdit={prod.isEdit}
      toggleMode={toggleMode}
      editProd={editProd}
    />;
  });
  
  return <div>
    {result}
  </div>;
}

ব্যবহারিক কাজ