React Props

In this tutorial, we will learn how to use props in React with examples.

React Props Overview

• Props is a special keyword in React that stands for properties and is being used to pass data from one component to another and mostly from parent component to child component.
• We can say props is a data carrier or a means to transport data.
• React props is an object which you get instantly when you create a React component.

React Props Example 1

The below code example demonstrates the usage of props in React to pass data from a parent component to a child component. 

export const Student = (props) => {

    console.log(props);
    return (
        <div className="center">
            <p>First name: {props.firstName}</p>
            <p>Last name: {props.lastName}</p>
            <p>Email Address: {props.email}</p>
        </div>
    )
}

Inside the component's JSX, the props values are accessed and displayed. It shows the first name, last name, and email address of a student.

Next, import and use the Student component in an App component:

import { Student } from './components/PropsDemo'

function App() {
  return (
    <div>
       <Student 
          firstName = "Ramesh"
          lastName="Fadatare"
          email="ramesh@gmail.com"
      />
      
      <Student 
          firstName = "Umesh"
          lastName="Fadatare"
          email="umesh@gmail.com"
      /> 

    </div>
  )
}

export default App

When the App component is rendered, it includes two instances of the Student component. Each instance receives different values for the firstName, lastName, and email props. The props are then accessed and displayed in the Student component's JSX, showing the student's information on the rendered page.

React Props Example 2 - Pass an object as props to a React component

We may pass an object as props to a React component.

export const Student = (props) => {

    console.log(props);
    return (
        <div className="center">
            <p>First name: {props.student.firstName}</p>
            <p>Last name: {props.student.lastName}</p>
            <p>Email Address: {props.student.email}</p>
        </div>
    )
}

App component:

import { Student } from './components/PropsDemo'

function App() {

  const student = {
    firstName : "Ramesh",
    lastName : "Fadatare",
    email : "ramesh@gmail.com"
  }

  return (
    <div>
      <Student student= { student }/>
    </div>
  )
}

export default App

React Props Example 3 - Pass an Array as props to a React component

We may pass an array as props to a React component.

export const Student = (props) => {

    console.log(props);
    return (
        <div className="center">
            <p> Array data: {props.data} </p>
        </div>
    )
}

App component:

import { Student } from './components/PropsDemo'

function App() {


  const skills = ['HTML', 'CSS', 'JavaScript']

  return (
    <div>
      <Student data = { skills }/>
    </div>
  )
}

export default App

Destructuring props

Destructuring was introduced in ES6. It’s a JavaScript feature that allows us to extract multiple pieces of data from an array or object and assign them to their own variables.

In React, destructuring props improves code readability.

Two ways to destructure props in functional component

There are two ways to destructure props in a react component. The first way is destructuring it in the function parameter itself:

export const Student = ({firstName, lastName, email}) => {

    return (
        <div className="center">
            <p>First name: {firstName}</p>
            <p>Last name: {lastName}</p>
            <p>Email Address: {email}</p>
        </div>
    )
}

App Component:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'
import { Student } from './components/PropsDemo'

function App() {

  return (
    <div>
      <Student 
          firstName = "Ramesh"
          lastName="Fadatare"
          email="ramesh@gmail.com"
      />
      
      <Student 
          firstName = "Umesh"
          lastName="Fadatare"
          email="umesh@gmail.com"
      />
    </div>
  )
}

export default App

The second way is destructuring props in the function body:

export const Student = (props) => {

    const {firstName, lastName, email} = props

    return (
        <div className="center">
            <p>First name: {firstName}</p>
            <p>Last name: {lastName}</p>
            <p>Email Address: {email}</p>
        </div>
    )
}

Related Tutorials

• React Hooks - useState and useEffect
• React JS ( React Hooks) + Spring Boot Tutorial
• Create a New React App Step by Step
• Understanding React App Folder Structure
• How to Add Bootstrap to React App
• ReactJS Axios GET, POST, PUT, and DELETE Example Tutorial
• ReactJS Axios Example
• ReactJS Fetch API Example
• React JS CRUD Example Tutorial
• React Router Step-By-Step Tutorial
• React Class Components
• React Functional Components
• React Props
• React State and setState in Class Components
• React useState Hook
• React Conditional Rendering
• How to Add Bootstrap in React JS Using NPM
• How to Create React App using Vite
• Handling Events in React
• How to Consume REST API in React
• React JS Form Validation Example