Passing state through the props object in React

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.