Question 287178 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Pass data from child component to parent

I am trying to pass information from a child component up to the parent component, and I want this to happen, whenever the information in the child component changes.

What I have so far does not seem to work. The value of config does get updated in the child component, but the value of data never gets updated in the parent component.

What am I doing wrong?

Here is (a cutdown version of) my parent:

function App() {
  const version = process.env.VERSION;

  const [data, setData] = React.useState(null)

  const childToParent = (childData) => {
    setData(childData)
  }

  console.log(data)

  return (
          <Container data-testid="containerId" childToParent={childToParent} />
        <Footer data-testid="footerId" version={version} config={data} />
  );
}

export default App;

and here is (a cutdown version of) my child:

const Container = (childToParent) => {

    // config comes from an API call

    React.useEffect(() => {
        () => childToParent({config});
    }, [config]);

    return (
        <other components/>
    )
}
Tags:

2

Answers


  1. 0
    1. The props in your Container component are not being destructured properly.
    2. There is a mistake in the useEffect dependency array.

    Let’s correct these issues:

    1. In the Container component, the props need to be destructured properly to access childToParent.
    const Container = ({ childToParent }) => {
  // config comes from an API call
  const [config, setConfig] = React.useState(null);

  // Simulating API call
  React.useEffect(() => {
    // Replace this with your actual API call
    // For simulation purposes, I'll use a setTimeout
    const fetchData = () => {
      // Simulated API response
      const response = { config: /* your config data here */ };
      setConfig(response.config);
    };

    fetchData();
  }, []);

  React.useEffect(() => {
    childToParent(config); // Sending config to the parent
  }, [config, childToParent]);

  return (
    <div>
      {/* Other components */}
    </div>
  );
};
    1. In the parent component (App), you need to pass the childToParent function correctly to the Container component.
    function App() {
  const version = process.env.VERSION;
  const [data, setData] = React.useState(null);

  const childToParent = (childData) => {
    setData(childData);
  };

  console.log(data);

  return (
    <div>
      <Container childToParent={childToParent} />
      <Footer version={version} config={data} />
    </div>
  );
}

export default App;

    With these adjustments, the config data from the Container component should now properly update the data state in the parent (App) component whenever there’s a change in the config value.

    Login or Signup to reply.
  2. 0

    At first you have to destructure childToParent from props;

    here is the sample code;

    import React from 'react';

const Container = (props) => {
  const { childToParent } = props;

  const data = 1;
 
  const handleClick = () => {
     childToParent(data);
  }

  return (
    <div>
      <button onClick={handleClick}>Trigger Function</button>
    </div>
  );
}

export default Container;

    or else destructure directly by using Curly Braces

    const Container = ({childToParent}) => {}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search