How to send data between components using props in React?

Web applications require passing data from one component to another. We can pass data in between React components using props. Props stands for properties. We can pass these properties via HTML attributes.

Send Data using Props

Since child components data can be accessed in the parent component. The data in props is passed from the parent to the child component. Consider the example below on how to use props in React.

<Home setWallpaper={setWallpaper} setDim={setDim} setBlur={setBlur}/>

The code above renders the ‘Home’ component, passing the props, ‘setWallpaper‘, ‘setDim‘, and ‘setBlur‘, to it. In this case, these props are React states we are passing to child components, so we can change these states in the child components and the update gets reflected throughout our application, specifically the parent components. Child component state changes can be easily reflected in parent states. However, for parent states, we need to pass props to child components.

Receive Data from Props

We can read data from props in child components. Consider the example above, where we passed React States as props to the Home component. Consider the code below, for reading props data in our Home component.

function Home({setWallpaper, setDim, setBlur}) {

  const changeWallPaper = (data) => {
        setWallpaper("/wallpapers/123.jpg");
    }
}

Here, we use the ‘setWallpaper‘ state in our changeWallpaper function. We are receiving the props data while declaring the Home function in the first line.