रिएक्ट में पैरेंट स्टेट को चाइल्ड कंपोनेंट में एडिट करना

आइए अब हम अपने उत्पादों को इनपुट के माध्यम से एडिट करेंगे। इसके लिए चाइल्ड कंपोनेंट में एक बटन बनाते हैं।

इस बटन पर पहली बार क्लिक करने पर उत्पाद के नाम और कीमत के बजाय उन्हें एडिट करने के लिए इनपुट दिखाई देंगे, और दूसरी बार क्लिक करने पर इनपुट के बजाय फिर से टेक्स्ट दिखाई देंगे।

उत्पादों वाले ऐरे में संशोधन करते हैं, 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>;
}

प्रैक्टिकल टास्क्स