Question 286742 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to update function that is passed to the Child component

Suppose I have a Dropdown component. Initally, I placed that Dropdown component in a Parent component and created my handleChange function and everything works fine. However, I want to abstract that Dropdown component into its own custom Child component and now my Parent component calls that Child component.

Now I am wondering how can I pass that handleChange function from my Parent component to my Child component in a way where I can update that handleChange function to update the states in the Child component. Not sure how to proceed with this? Do I need to use useCallBack function? Or something else?

const ParentComponent = () => {
  const identifierValue = useState([]);
  ...there are more states here.

  const handleChange = (_, items) => {
    //updates different states here
  };

  return (
    <ChildComponent
      selectedItem={identifierValue}
      onChange={handleChange}
    />
  );
};

export default ParentComponent;

const ChildComponent = ({ identifierValue, handleIdentifierChange }) => {

  const handleChange = (_, items) => {
    //I want to update the Child component states here
  };

  return (
    <Dropdown
      selectedItem={identifierValue}
      onChange={handleChange}
    />
  );
};

export default ChildComponent;
Tags:

3

Answers


  1. 0

    In the Parent component, only pass handleChange and identifierValue

    const ParentComponent = () => {
  const identifierValue = useState([]);
  ...there are more states here.

  const handleChange = (_, items) => {
    //updates different states here
  };

  return (
    <ChildComponent
      identifierValue={identifierValue}
      handleChange={handleChange}
    />
  );
};

export default ParentComponent;

    In the Child component, only retrieve handleChange and identifierValue

    const ChildComponent = ({ identifierValue, handleChange}) => {


  return (
    <Dropdown
      selectedItem={identifierValue}
      onChange={handleChange}
    />
  );
};

export default ChildComponent;
    Login or Signup to reply.
  2. 0

    You can do a props.onChange() call inside of your handleChange function that is defined in the ChildComponent. If you’re trying to access state setters inside of the ChildComponent that are defined in the ParentComponent, you could also pass in the state setters from the parent to the child as props.

    Login or Signup to reply.
  3. 0

    Let’s assume that the handleChange event will be triggered by an action in the Dropdown component.

    If you wish to only update the states in the parent component, here is an implementation :

    const ParentComponent = () => {
  const identifierValue = useState([]);

  const handleChange = (_, items) => {
    //updates different states here
  };

  return (
    <ChildComponent
      selectedItem={identifierValue}
      onChange={handleChange}
    />
  );
};
export default ParentComponent;


const ChildComponent = ({ identifierValue, handleIdentifierChange }) =>  
  return (
    <Dropdown
      selectedItem={identifierValue}
      onChange={handleIdentifierChange}
    />
  );
};
export default ChildComponent;

    Alternatively, if you want to update states in both the child and parent components, consider the following implementation :

    const ParentComponent = () => {
  const identifierValue = useState([]);

  const handleChange = (_, items) => {
    //updates different states here
  };

  return (
    <ChildComponent
      selectedItem={identifierValue}
      onChange={handleChange}
    />
  );
};
export default ParentComponent;

const ChildComponent = ({ identifierValue, handleIdentifierChange }) => {
  const handleChange = (_, items) => {
    // Update the child states
    handleIdentifierChange();
  };

  return (
    <Dropdown
      selectedItem={identifierValue}
      onChange={handleChange}
    />
  );
};
export default ChildComponent;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search