Reactjs: How To Access State Of Child Component.from A Method In Parent Component That Depends On State Of Child Component

I need to access a method handleCancelEdit() defined in parent component. But, the matter here is that every child component will have its own cancelEdit state. Now, what is happen

Solution 1:

It is always more logical to pass state and data down rather than up. If the Parent needs to interact with the edit state then that state should live in the parent. Of course we want independent edit states for each child, so the parent can't just have one boolean. It needs a boolean for each child. I recommend an object keyed by the name property of the field.

In ChildComponent, we move isEdit and setEdit to props. handleCancelEdit is just () => setEdit(false) (does it also need to clear the state set by onChange?).

functionChildComponent({fieldName, value, inputType, placeHolder, name, onChange, onSubmit, isEdit, setEdit}) {
    return (
        <p>{fieldName}: {value === ''? (
            <span><inputtype={inputType}placeholder={placeHolder}name={name}onChange={onChange}
                /><buttontype="submit"onClick={onSubmit}>Add</button></span>
            ) : ( !isEdit ? (<span> {value} <buttononClick={() =>setEdit(true)}>Edit</button></span>) :
            (<span><inputtype={inputType}value={value}name={name}onChange={onChange}
                /><buttontype="submit"onClick={onSubmit}>Save</button><buttontype="submit"onClick={() => setEdit(false)}>Cancel</button></span>)                            
            )}
        </p>
    );
};

In Parent, we need to store those isEdit states and also create a setEdit function for each field.

functionParent() {
  const [isEditFields, setIsEditFields] = useState({});

  consthandleSetEdit = (name, isEdit) => {
    setIsEditFields((prev) => ({
      ...prev,
      [name]: isEdit
    }));
  };

  /* ... */return (
    <div><ChildComponentfieldName={"Email"}
        value={email}inputType={"text"}
        placeHolder={"Enteremail"}
        name={"email"}
        onChange={(e) => setEmail(e.target.value)}
        onSubmit={handleUserEmail}
        isEdit={isEditFields.email}
        setEdit={(isEdit) => handleSetEdit("email", isEdit)}
      />
      <ChildComponentfieldName={"About"}
        value={about}inputType={"text"}
        placeHolder={"Entersomedetailsaboutyourself"}
        name={"about"}
        onChange={(e) => setAbout(e.target.value)}
        onSubmit={handleUserAbout}
        isEdit={isEditFields.about}
        setEdit={(isEdit) => handleSetEdit("about", isEdit)}
      />
    </div>
  );
}

---

You can clean up a lot of repeated code by storing the values as a single state rather than individual useState hooks. Now 5 of the props can be generated automatically just from the name.

functionParent() {
  const [isEditFields, setIsEditFields] = useState({});

  const [values, setValues] = useState({
      about: '',
      email: ''
  });

  constgetProps = (name) => ({
      name,
      value: values[name],
      onChange: (e) =>setValues(prev => ({
          ...prev,
          [name]: e.target.value
      })),
      isEdit: isEditFields[name],
      setEdit: (isEdit) =>setIsEditFields(prev => ({
          ...prev,
          [name]: isEdit
      }))
  });

  const handleUserEmail = console.log// placeholderconst handleUserAbout = console.log// placeholderreturn (
    <div><ChildComponentfieldName={"Email"}
        inputType={"text"}
        placeHolder={"Enteremail"}
        onSubmit={handleUserEmail}
        {...getProps("email")}
      /><ChildComponentfieldName={"About"}
        inputType={"text"}
        placeHolder={"Entersomedetailsaboutyourself"}
        onSubmit={handleUserAbout}
        {...getProps("about")}
      /></div>
  );
}