A Really Simple Intro to Using Props in React
Tags: react, props, components, webdev
Published: 2021-03-29 13:47:26

Props are an incredibly useful tool when working with React so it's worth spending some time getting used to them. Props are a way of sending data down the component tree from a parent to a child component.

I'll take you through a really simple example of using props to pass the users selection from a list of radio buttons to display in a child component.

Here's a screenshot of what we're looking to create - the selected name will display in the blue box, which is a child of the App component.

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

Begin by setting up your form like this -

![JSX code for form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s934brdoc553aze1rcwr.png)

I've added some simple CSS too. You can find all of the starting code <span style="color:#f0090d" class="has-inline-color"><a href="https://github.com/LauraToddCode/using-props-blog/blob/starter-code/src/App.js">here</a></span>.

If you haven't come across React.Fragment before, it's simply a way of wrapping your code without adding unnecessary div tags.

Now let's use the useState hook to initialise the state of 'value'. Then, create a function which sets the state of 'value' to the value of the selected radio button.

![Add useState](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31zba6zy5fo555gvyazb.png)

Now we need to add the 'handleChange' function as an onChange event to the form.

![Add handle change](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uuefi647uzlp4j15pvzu.png)

Next, let's create the child component in which we want to display our selected name. I've called the component 'Selection' but you can call it whatever you like. The 'Selection' component has a single pair of `<h3>` tags.

![Add selection component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ie05irgyj4h70mh8hab4.png)

Back in the App component, import 'Selection' and add it below your form.

![add Selection component to App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lan8xkrv9n7h3oc1f5xn.png)

Go back again to your 'Selection' file and add 'props' to the function parameters. This will allow you to pass down information from the parent component.

Then, within the `<h3>` tags add {props.selection}. You can can name the prop whatever you like but I have chosen to call it 'selection'. 

![Add props.selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34x85w86ua0zl0w83921.png)

Go back to the App component again and within the Selection component, add the 'selection' property (or whatever you've called it).

We can then assign {value} to it. You'll recall that value holds the state of the currently selected item. By assigning it to the 'selection' property, we have passed it down to the 'Selection' component and the chosen value will now display on the page.


![add value to selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jd80gdmidrih66ywplml.png)

You can check your finished code [here](https://github.com/LauraToddCode/using-props-blog/tree/master/src).