Passing state through the props object in React
Tags: reactjsjavascript
Published: 2019-10-25 12:52:50

---
title: Passing state through the props object in React
published: true
description: How to pass data from parent to child component in React
tags: reactjs javascript
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/passing-state-props.jpeg
---

## How to pass data from parent to child component in React

*State* is the data that flows through our application and in React we pass state around from parent to child component.
The vehicle we use to pass state between components is a Javascript object named `props`.

We already said that functional components are just functions, and like any function they can take arguments.
React functional components take a props argument that represents the state of the application.

For example, we can have a component that displays a list of students. The component is named `Students` and is defined in a file called `Students.js`
For this example we have some data that represents a list of students as a Javascript array.
Each element of the array is an object that represents a student with few properties:

```
const students = [                   
   {                                  
     name: 'Carol',                   
     age: 20,                         
     likes: 'Math'                   
   },                                 
   {                                  
     name: 'Alan',                    
     age: 22,                         
     likes: 'English'                
   }                              
 ]      
 ```

Normally, in React, data will come from some external source, like a database or an API.
For our example the array is defined inside the Students component file and we want to render one child component for each student in our list.
The child component will be called Student and will render properties like name, age and likes.

Let's stop here for a minute and recap.
We have defined a list of students in the `Students` component and we want to render each student properties in the `Student` component. How do we pass the data from the parent component `Students` to the child component `Student`?
We pass it via the `props` object.

The `props` object has the job to pass data from the parent component to the child component. Here's how we do it.

At the top of the `Students` component we import the `Student` component.
Then we render one `Student` component for each student in the original array.
We pass an attribute called `student` to each `Student` component.
This attribute is set to one of the array elements that represents one student.
Here's the code:

```
import Student from './Student';

const Students = () => {
  return (
    <div className="student-list">
      <h2>Students</h2>

      <Student student={students[0]} />
      <Student student={students[1]} />
      <Student student={students[2]} />
    </div>
  )
}
```

Note that when we pass the student attribute inside the Student component, we must include the student value in *curly braces*.
This is because we are inserting Javascript syntax (`students[0]`) inside JSX syntax. Inside JSX, brackets are used to interpolate Javascript.
The student object is passed down to the `Student` component as a props object and can be displayed by calling `props.student`.

Here's how we display the student data inside the `Student` component:

```
const Student = props => {
  return (
    <div>
      <h3>{props.student.name}</h3>
      <p>Best in: {props.student.bestIn}</p>
    </div>
  )
}
```

As you can see, we pass the `props` object to the `Student` component as an argument to the function.
Inside the function, we have access to `props.student` which is a `student` object from the `students` array.
The `student` object has three properties: `name`, `age`, and `likes` that we can access by calling them.

You probably noticed that we iterate through the `students` array one object at a time. This is OK for this contrived example but in real life we would need to use an array method to iterate through the array.
Tomorrow we will look at the `array.map()` method that helps us iterate through the students.