How to pass data or state between sibling components in React using Props

4 min readOct 21, 2023

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;