How to pass props to parent from child in React?

Question

I am new to React and I am trying to create a "CV-Generator" like this like this, What happens here is whenever user puts a value in any of the input it automatically renders to the Render preview(right side), My problem here is I am rendering a <Form /> where it renders three child components namely:- <PersonalInfo />, <Experience />, <Education />, In each of three I process Input onChange and setState the data, but problem is I need to render this data to again Render Preview(right on the link), But I am confused how can I pass my data from child components(i.e. <PersonalInfo />, <Experience />, <Education />) to the parent Component(<App />)

App.js

return (
    <div className='container'>
      <Form />           //need data from her childs
      <DisplayInfo />    //want to pass data to this one
    </div>
  );

Form.js

return (
      <form>
        <PersonalInfo /> //need data from here
        <Experience />   //need data from here
        <Education />    //need data from here
      </form>
    );

Example state from one of the three child

this.state = {
      firstName: '',
      lastName: '',
      title: '',
      address: '',
      phoneNumber: '',
      email: '',
      description: '',
    };
// want to pass all this data

See [Components and Props ](https://reactjs.org/docs/components-and-props.html#function-and-class-components) and [https://reactjs.org/docs/react-component.html#overview](Components and Props) — Shivam Jha, Jun 13 '21 at 14:08
Does this answer your question? [How to pass state back to parent in React?](https://stackoverflow.com/questions/40722382/how-to-pass-state-back-to-parent-in-react) — Matt U, Jun 13 '21 at 14:18

score 0 · Answer 1 · answered Jun 13 '21 at 14:28

0

You have to use callback in child, and then some function in parent to get those data. But remember that you have to trigger the callback function first.

answered Jun 13 '21 at 14:28

qNA

306
3
2

score 0 · Accepted Answer · answered Jun 13 '21 at 14:35

Do this for Form component

   return (
  <form>
   <PersonalInfo 
      firstName: {firstName},
      lastName: {lastName},
      title: {title},
      address: {address},
      phoneNumber: {phoneNumber},
      email: {email},
      description: {description},
   /> 
   <Experience />   
   <Education />    
 </form>
);

And do this for the DisplayInfo.js

    function DisplayInfo({firstName,lastName,title,address,phoneNumber,email,address}) {
      return (
        <div className='container'>
           //your code here for example
           <h1>First Name:-{firstname}</h1>
            <p>Description:-{description}</p>
        </div>
      );
    }

How to pass props to parent from child in React?

2 Answers2