How to pass data or state between sibling components in React using Props
Hello Developers đź‘‹,
Today we are going to learn how to pass data or state among sibling components using props.
Here is how components are arranged in our component tree
For this example, we will have 4 components:
a root component named App
, Parent component UnitGame
, and two child component DesktopSection
and DesktopCodeSection
Let’s first learn what is Props
props are used to send data down the component hierarchy, every parent component can pass some information to its child components by giving them props.
Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, and functions.
Some Important Fact about Props
props are immutable, when a component needs to change its props, it will have to “ask” its parent component to pass it different props — a new object! Its old props will then be cast aside, and eventually the JavaScript engine will reclaim the memory taken by them.
What is PropTypes
propTypes
is an object that is used to define the expected types of the props component should receive. It is a way to specify the data types and requirements for the props that are passed to a React component.
To pass state among sibling components using props, you can follow these steps
step 1: First we are going to define the state in parent
(UnitGame)
import DesktopSection from "../components/DesktopSection";
import DesktopCodeSection from "../components/DesktopCodeSection";
import React from "react";
const UnitGame = () => {
{/* state defined in parent component */}
const [height, setHeight] = React.useState("20%");
const [width, setWidth] = React.useState("30%");
return (
<div className="flex w-screen h-screen bg-unitBg">
<DesktopCodeSection />
<DesktopSection/>
</div>
);
}
export default UnitGame;
Step 2: Now we will send setHeight and setwidth to Child 1 (DesktopCodeSection)
import DesktopSection from "../components/DesktopSection";
import DesktopCodeSection from "../components/DesktopCodeSection";
import React from "react";
const UnitGame = () => {
const [height, setHeight] = React.useState("20%");
const [width, setWidth] = React.useState("30%");
return (
<div className="flex w-screen h-screen bg-unitBg">
{/*we will send newHeight and newWidth to child 1 as a prop*/}
<DesktopCodeSection onHeightChange={setHeight} onWidthChange={setWidth}/>
<DesktopSection/>
</div>
);
}
export default UnitGame;
Step 3: Accept the props in child 1(DesktopCodeSection) component
when the user changes the value of the height input field, the OnHeightChangeHandler
function is triggered, calling the onHeightChange
function and passing the new value.
import PropTypes from "prop-types";
const DesktopCodeSection = ({onHeightChange, onWidthChange}) => {
const OnHeightChangeHandler = (event) => {
onHeightChange(event.target.value);
};
const OnWidthChangeHandler = (event) => {
onWidthChange(event.target.value);
};
return (
<div>
<input id="width" onChange={OnWidthChangeHandler}/>
<input id="height" onChange={OnHeightChangeHandler}/>
</div>
)
}
DesktopCodeSection.propTypes = {
onHeightChange: PropTypes.func.isRequired,
onWidthChange: PropTypes.func.isRequired,
};
export default DesktopCodeSection;
Step 4: Update the value in child 2 component
Now we have updated value in UnitGame
parent component, we can simply pass that data down to the DesktopSection
child 2 component as a prop
import DesktopSection from "../components/DesktopSection";
import DesktopCodeSection from "../components/DesktopCodeSection";
import React from "react";
const UnitGame = () => {
const [height, setHeight] = React.useState("20%");
const [width, setWidth] = React.useState("30%");
return (
<div className="flex w-screen h-screen bg-unitBg">
{/*we will send newHeight and newWidth to child 1 as a prop*/}
<DesktopCodeSection onHeightChange={setHeight} onWidthChange={setWidth}/>
{/*pass the updated value in child 2*/}
<DesktopSection newHeight={height} newWidth={width}/>
</div>
);
}
export default UnitGame;
Step 5: Accept the props in child 2 and use it
import desktopImage from '../assets/desktop.svg';
import PropTypes from 'prop-types';
const DesktopSection = ({newHeight, newWidth}) => {
console.log("height and width " + newHeight+ " "+ newWidth);
return (
<div
style={
{
height: newHeight,
width: newWidth,
}
}
>
</div>
)
}
DesktopSection.propTypes = {
newHeight: PropTypes.string.isRequired,
newWidth: PropTypes.string.isRequired,
};
export default DesktopSection;
We have successfully passed data from sibling to sibling using the parent as a medium.
If there is any question or confusion regarding the tutorial. Feel free to ask your questions in the comments below.
Thank you for reading this article. If you found this helpful and interesting, please clap and follow me for more such content.
you can also check out my new app on playstore here
If I got something wrong, mention it in the comments. I would love to improve.
Connect with me on Medium, GitHub, Twitter and LinkedIn