A Really Simple Intro to Lifting State in React
Tags: react, state, components, webdev
Published: 2021-04-25 11:07:51

When using React, you can easily share information downwards in the component tree. Using props, you're able to pass data from a parent component to a child component but how do you pass information from a child to a parent or even between siblings?

That's when we need to lift state. I'll take you through a basic example.

Lets say you have an App component with two child components. One is a dropdown menu which allows the user to choose their favourite holiday destination and the other is a coloured box which should display the user's choice.

![dropdown menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wo1bxwq8pkun6zpsguv0.jpg)

You can find the starting code <span style="color:#f90c00" class="has-inline-color"><a href="https://github.com/LauraToddCode/lifting-state-in-react/tree/main/src">here</a></span>.

So here's the structure of our app -
![App structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/no5unr6w7o59n1535cc9.jpeg)

And we want to pass information from Dropdown.js to Chosen.js -

![Pass info to sibling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ly5pho0djlizo5p33omu.jpeg)

But we can't do that directly, so we need to get the information up to App.js and then down again to Chosen.js -

![Lifting state and passing down again](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ta8hhixxyo8jwhndq0z.jpeg)

The way we do this is to set the state in App.js rather than in Dropdown.js. We do this exactly as we would if we were doing it within the child component.

Begin by initialising the state of the chosen option. You can call it what you like but I'm going to call it 'chosen'.

![initialise chosen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3t83uhuea30ps930y48f.png)

Next, create an event handler for the onChange event of the dropdown menu. This will set the state of 'chosen' to the chosen value from the dropdown menu -

![on change event handler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0wt65qsft8yblnzeraf.png)

Don't forget to bind the function in the constructor. So you should have this at the top of your App component -

![Bind the function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ikeq69i747knx0k5yga.png)

Now we need to connect the event handler to the Dropdown component so let's go over to the Dropdown.js file and add the onChange property to the `<select>` tags. We do this by adding "{props.onChoose}". The "onChoose" part an be called anything you like, this will just be what you use as the property name within the App component. 

![add props.onChoose](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfmu7eldb3ofarlrhyfn.png)

Then we can go back to App.js and add the "onChoose" property to the Dropdown component and set its value to "{this.handleChange}" (the event handler that we set up earlier).

![add onChoose to dropdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/479zm5rwa48os2p3bay0.png)

Next, let's go over to the Chosen.js file and "{props.choice}" within some `<p>` tags. This will display the chosen destination.

![add props.choice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vakrifm8v8hkwgxy5359.png)

Finally, go back to the App.js file and add "choice={this.state.chosen}" to the Chosen component. This will mean that whatever the current state of "chosen" is will be displayed in the paragraph tags of the Chosen component.

![add state of chosen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuchz3rlg40snt8bqnmp.png)

Now, you can run your app and see your choice displaying in the blue box -

![Final result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tu8frbxjidn8vfmgc138.jpg)

You can check your final code [here](https://github.com/LauraToddCode/lifting-state-in-react/tree/main/src).