How to pass data between sibling components in React | Lifting up state | Easiest way

Here are the steps we will follow to pass data between sibling components in React.

1️⃣ Step 1: Store the state in a parent component through which the data can be passed to the sibling component.

2️⃣ Step 2: Pass the state and setState method as props to the sibling component

3️⃣ Step 3: Now when we call the setState function from one sibling then it updates the state in the parent component and hence causing a re-render of the parent and the child components and hence all the sibling components receive the updated state.

🎓 Topics covered include:
✅ Sharing data across
✅ Lifting up state

[exacode]

I hope you enjoy watching it as much as I enjoyed making it. If you have any questions or comments, feel free to leave them below and I'll do my best to respond. And don't forget to like and subscribe to my channel for more great content!

[sumanshuborkar]

As a beginner in react this method is really useful to me, thanks brother!

[dbuddheiejsjejebwiwhww]

Bro it feels so freaking easy after your explaination... Thank U... I had a huge confusion here.. And U just cleared it... Thank U again❤

[ademuwagunoladipupo]

Thank you. I am new to Rect.js and this video helped me solve my assignment

[patel]

I've same use case but in my case I need to pass only 2 props value (username and password) out of bunch of state values from my one sibling to another.

[SonuSinghmirzapur]

Code for Expo = React native ?

Are both same ?

[alanhf]

But lifting state won't cause a rerender of the parent component?

[iprocoder]

This doesn't seem practical. Not every component is rendered in App.js. Unless one has to create a non-rendering parent component. I will recommend avoiding this method and using Redux instead.