व्यवस्थापक नामक एक सरणी में, जब मैं ऐसा करता हूं, तो मैं "अपडेट" बटन के क्लिक पर एक div दिखाना चाहता हूं, div सरणी के सभी तत्वों के नीचे दिखाता है। मैं केवल इसे चयनित तत्व के नीचे दिखाना चाहता हूं।

function Admin(props) {
  const [showMe, setShowMe] = React.useState(false);

  const [updateName, setupdateName] = React.useState("");
  const [updateDesc, setupdateDesc] = React.useState("");

  return (
    <div>
      <div className="adminProducts">
        {props.admin.map((x, i) => (
          <div>
            {showMe ? (
              <div className="UpdateSection">
                <input
                  type="text"
                  placeholder="Product Name"
                  onChange={e => setupdateName(e.target.value)}
                  value={updateName}
                />
                <br />

                <textarea
                  placeholder="Product Description"
                  onChange={e => setupdateDesc(e.target.value)}
                  value={updateDesc}
                />

                <button
                  type="submit"
                  onClick={e => {
                    props.UpdateInfo({ updateName, updateDesc }, { x }, i);
                    setupdateName("");
                    setupdateDesc("");
                  }}
                >
                  Save
                </button>
              </div>
            ) : null}
            <div>{x.name}</div>
            <div>
              <button onClick={e => setShowMe(!showMe)}>
                {showMe ? "Close" : "Update"}
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

मैं सरणी में अलग-अलग तत्वों के लिए शोमे को सत्य के रूप में सेट करना चाहता हूं ताकि क्लासनाम अपडेटसेक्शन वाला div केवल उस विशिष्ट तत्व के लिए दिखाए, न कि किसी अन्य तत्व के लिए।

0
Hardik Aswal 31 अगस्त 2019, 14:12

1 उत्तर

सबसे बढ़िया उत्तर

आप उस तत्व की आईडी सहेज सकते हैं जिसे आप दिखाना चाहते हैं:

  const [showMe, setShowMe] = React.useState([]);

  // ...

  const isShown = el => showMe.includes(el.id);

  const toggleShown = el => {
    setShowMe(shown => {
      if (shown.includes(el.id)) {
        return shown.filter(id => id !== el.id);
      }
      return [...shown, el.id];
    });
  };

  //...

  return (
    <div>
      <div className="adminProducts">
        {props.admin.map((x, i) => (
          <div>
            {isShown(x) ? (

            //...

            <div>
              <button onClick={e => toggleShown(x)}>
                {isShown(x) ? "Close" : "Update"}
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
1
Clarity 31 अगस्त 2019, 16:54