React Basics: Using Props to Pass Data to Components — Part 2 in a 4 Part Series

React is a JavaScript library, and it can be an extremely useful single page application framework. In this series, I’m exploring some of the basics concepts in React. My last blog reviewed the differences between class and functional components: https://medium.com/@marissanolan7/react-basics-functional-vs-class-components-part-1-in-a-4-part-series-fd3cef8120bb. Here, I’d like to briefly explore the usefulness of props and how to pass data to components through props.

In React, props, or properties, are pieces of data that a component needs or relies on in some way. They are similar to function arguments in JavaScript that can be passed down to another component through the JSX syntax, which is written like HTML within React’s return statement or render function.

For our example here, we have our base App.js file set up as a class component, and we’re importing a TodoContainer component file at the top from the Components folder. This component will import a card structure from the TodoCard component.

To start with, I’ve set the state equal to an object with a list of todo objects each with a title and content.

To render the TodoContainer to the page, we can write the TodoContainer as a self-closing tag in the render/return statement at the bottom. So far, that would look something like this:

Now that we have the TodoContainer imported and rendering to the page, we can pass down some props from the state to the TodoContainer component. To do this, we include whatever it is that we want to pass as props within that self-closing component in the JSX. There, we can set a variable/prop name equal to the information to be sent down as that prop. If this is something that is held in state, then we want to pass that down in curly brackets and using the syntax ‘this.state’ along with whatever it is that we’re wanting to pass down. Here, we can pass down the list of todos as below:

Since that data has been passed down to the TodoContainer as props, we can either pull that data out of the props in the TodoContainer, or we can choose to pass it to another component. Here, the hierarchy has been set up so that we will pass the information from the todo props object down one more time to the TodoCard component. In order to do this for each item in that todo list though, we have to map or iterate over the props object coming from the App and then tell it to return a TodoCard for each object in the props. Notice that we are now passing down a prop called “todo” that is equal to each todo that the function iterates over. Also worth noting is the importance of imporing the TodoCard at the top of xyz part of the code so we can access that component within the TodoContainer.

Then, in the return statement for this functional component, in order to get the showTodo’s mapping function to run, we have to include it in a tag (here I chose a ‘ul’ tag for an unordered list) and then include the parenthesis which will invoke that function. Here is a peek at what that looks like in the code:

Last, in the TodoCard component, we set up another functional component and that will also take in props that were passed along from the TodoContainer. Here, we can simply return some JSX with the way we want to style the pieces of the prop that was passed in. In this case, in order to access the information in the todo prop, we have to call on ‘props.todo’ and then the key that we want the value of. In this case, we’re going to extract the title and content of each todo.

Now we should have everything connected. To summarize, we started with a state set equal to an object with a key of todos and an array of todos, each with a title and content. Then we passed that array of todos down as props to the TodoContainer component. From there, we mapped over each todo in the array and passed each todo down as a prop to the TodoCard component. From there, the TodoCard component extracts out the data from the prop by calling on ‘prop.todo.title’ and ‘prop.todo.content’.

With just a little CSS styling, here’s how that rendered to the page in our React App:

One last thing I wanted to mention about using props is that we can destructure them as we pull them into the components. Here is one instance of how to do that using the example above.

As we pulled in the props into the TodoCard, instead of just listing props in the argument, we can destructure the props by adding curly braces and then adding the object inside of those curly braces instead. When we do this, instead of having to call on ‘props.todo.title’ to extract that data, we can just call on ‘todo.title’. Here is what that would look like in our code:

So you can see that this can lead to cleaner, more simplified code that is easier to read. This can be very helpful, but you have to be aware that if you’re passing in multiple props, to destructure them using curly brackets, you have to include all of the props you want to use and separate them with a comma.

Overall, the use of props to pass data down through the component hierarchy can be extremely useful and is a great way to execute the concept of ‘separation of concerns.’ By having distinct sections for separate concerns within a multiple file program, it becomes easier to troubleshoot and resolve errors as they arise.

Next up in part 3 of 4: Using the useState() Hook!