React Props

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF