ReactJS Tutorial for Beginners - 8 - Props

❮ Previous Chapter Next Chapter ❯

---

In this chapter, we will learn what is props ( shorthand for properties) and how to use props to pass data from one component to another component.

What are props?

The props is short for properties and they are used to pass data between React components. React’s data flow between components is uni-directional (from parent to child only).

Props are immutable so we cannot modify the props from inside the component. We use props to pass data from parent component to child component and child component can't change it's value as it is immutable and owned by the parent component.

React props are like function arguments in JavaScript and attributes in HTML.

To send props into a component, we use the same syntax as HTML attributes:

const element = <Welcome name="Ramesh" />;

The component receives the argument as a props object and use the this.props.name attribute in the component to access the name value:

class Person extends React.Component {
  render() {
    return <h2>I am a {this.props.name}!</h2>;
  }
}

React Props Example 1

In below example, we use props to pass name and heroName from App component to Greet component and display the name and heroName in a browser:

App Component

import React, { Component } from 'react'
import './App.css'
import Greet from './components/Greet'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Greet name="Bruce" heroName="Batman">
          <p>This is children props</p>
        </Greet>
        <Greet name="Clark" heroName="Superman">
          <button>Action</button>
        </Greet>
        <Greet name="Diana" heroName="Wonder Woman" />
      </div>
    )
  }
}

export default App

Greet Component

Let's create Greet functional component with the following code:

import React from 'react'

const Greet = props => {
  return (
    <div>
      <h1>
        Hello {props.name} a.k.a {props.heroName}
      </h1>
      {props.children}
    </div>
  )
}

Notice that we are using props.children to access the value of HTML children elements.

React Props Example 2

Let's create a PropsDemo, Table, TableBody, and TableHeader components to pass the data from one component to another component using props.

PropsDemo.js

Let's create PropsDemo.js file with the following code:

import React, { Component } from 'react'
import Table from './Table';

export default class PropsDemo extends Component {
    render() {

        let employeesData = [{
            "name": "Ramesh",
            "role": "Software Developer"
        },{
            "name": "Tony",
            "role": "Software Developer"
        },
        {
            "name": "Pramod",
            "role": "Software Developer"
        },{
            "name": "Santosh",
            "role": "QA Engineer"
        }];
        return (
            <div>
                <Table employeesData = {employeesData}/>
            </div>
        )
    }
}

We have created an array of employee objects. Now, we're going to pass the data through to the child component (Table). 

return (
            <div>
                <Table employeesData = {employeesData}/>
            </div>
        )

Now that data is being passed through to Table, we have to work on accessing it from the other side.

ableHeader.js

Let's create a file named TableHeader.js and within this file create a class component called TableHeader:

import React, { Component } from 'react'

export default class TableHeader extends Component {
    render() {
        return (
        <thead>
            <th> Employee Name </th>
            <th> Employee Role </th>
        </thead>
        )
    }
}

Let's create a new file called Table.js, within this file create a class component called Table and import TableHeader and TableBody class components into it:

import React, { Component } from 'react'
import TableHeader from './TableHeader';
import TableBody from './TableBody';

export default class Table extends Component {
    render() {

        const { employeesData } = this.props;
        return (
            <div>
                <table border = "1">
                    <TableHeader />
                    <TableBody employeesData = {employeesData} />
                </table>
            </div>
        )
    }
}

In Table, we can access all props through this.props. We're only passing one props through, employeesData, so we'll use this.props.characterData to retrieve that data.

Since our Table component actually consists of two smaller simple components, I'm going to pass it through to the TableBody, once again through props.

TableBody.js

Let's create a file named TableBody.js and within this file create a class component called TableBody:

import React, { Component } from 'react'

export default class TableBody extends Component {

    constructor(props) {
        super(props)
    }
    
    render() {

        const rows = this.props.employeesData.map((row, index) => {
            return (
              <tr key={index}>
                <td>{row.name}</td>
                <td>{row.role}</td>
              </tr>
            )
          })

        return (
            <tbody> { rows } </tbody>
        )
    }
}

Note that we have passed props through as a parameter, and map through the array to return a table row for each object in the array. This map will be contained in the rows variable, which we'll return as an expression.

If your component has a constructor function, the props should always be passed to the constructor and also to the React.Component via the super() method as shown in the above example.

Demo

Start React App using npm start and Use http://localhost:3000/ link to access index.html page in a browser:

React Props are read-only! You will get an error if you try to change their value.

What's Next?

In this chapter, we learned about props in React with an example. In the next chapter, we will learn about state and setState() in React with an example.

---

❮ Previous Chapter Next Chapter ❯