How to Get Props of Component in React

React is all about how data flows through your application, and most of that data travels via “props.”

In my eight years of building React applications, I’ve found that mastering how to access and manage these props is the “bread and butter” of a frontend developer.

Whether you are building a complex financial dashboard for a Wall Street firm or a simple tax calculator, you need to know how to grab data passed from a parent.

In this tutorial, I will show you exactly how to get props of a component in React using several modern and professional methods.

Table of Contents

What are Props in React?

Before we jump into the “how,” let’s quickly touch on the “what.” Props (short for properties) are read-only inputs passed from a parent component to a child component.

Think of them as arguments passed to a JavaScript function; they allow your components to stay dynamic and reusable across your entire app.

Method 1: Get Props in Functional Components (Standard Way)

Most modern React applications are built using functional components. This is by far the most common way I access props in my daily work.

In this method, the component receives an object as its first argument, which contains all the properties passed down from the parent.

Suppose we are building a “Salary Calculator” for an HR firm based in New York. Here is how we would get those props:

import React from 'react';

// The Child Component
const SalaryDetails = (props) => {
  // Accessing props using the props object
  return (
    <div style={{ padding: '20px', border: '1px solid #ccc' }}>
      <h2>Employee Payroll Summary</h2>
      <p><strong>Employee Name:</strong> {props.employeeName}</p>
      <p><strong>Annual Salary:</strong> ${props.annualAmount}</p>
      <p><strong>State Tax:</strong> {props.stateTax}%</p>
    </div>
  );
};

// The Parent Component
const PayrollApp = () => {
  return (
    <div>
      <h1>US Corporate Payroll System</h1>
      <SalaryDetails 
        employeeName="John Doe" 
        annualAmount="120,000" 
        stateTax="6.85" 
      />
    </div>
  );
};

export default PayrollApp;

You can see the output in the screenshot below.

In the example above, the SalaryDetails component receives props. We then use props.employeeName to display the specific value sent from the PayrollApp.

Method 2: Access Props via Destructuring (The Professional Choice)

In my experience, almost all senior developers prefer destructuring props directly in the function signature.

It makes the code much cleaner and easier to read because you don’t have to keep typing “props.something” every time you want to use a value.

Let’s look at an example involving a Real Estate listing for a property in Florida:

import React from 'react';

// Accessing props by destructuring right in the arguments
const PropertyListing = ({ address, price, bedrooms, zipCode }) => {
  return (
    <div className="listing-card">
      <h3>Miami Beach Property</h3>
      <ul>
        <li>Address: {address}</li>
        <li>Price: ${price.toLocaleString()}</li>
        <li>Bedrooms: {bedrooms}</li>
        <li>Zip Code: {zipCode}</li>
      </ul>
    </div>
  );
};

const RealEstateApp = () => {
  return (
    <div className="container">
      <h1>Luxury Real Estate - Florida</h1>
      <PropertyListing 
        address="123 Ocean Drive, Miami, FL" 
        price={2500000} 
        bedrooms={4} 
        zipCode="33139" 
      />
    </div>
  );
};

export default RealEstateApp;

You can see the output in the screenshot below.

By using { address, price, bedrooms, zipCode } inside the parentheses, we “unpack” the props object immediately. This is the cleanest way to write React code in 2026.

Method 3: Get Props in Class-Based Components

While functional components are the standard now, you will still encounter class components when working on older enterprise systems (legacy codebases).

In class components, you don’t receive props as a function argument. Instead, React attaches them to the class instance, and you access them using this.props.

Let’s imagine a “US Presidential Election Tracker” component:

import React, { Component } from 'react';

class ElectionResult extends Component {
  render() {
    // Accessing props using this.props
    const { stateName, electoralVotes, winner } = this.props;

    return (
      <div style={{ backgroundColor: '#f0f0f0', margin: '10px', padding: '15px' }}>
        <h2>State: {stateName}</h2>
        <p>Electoral College Votes: {electoralVotes}</p>
        <p>Projected Winner: <span style={{ color: winner === 'Republican' ? 'red' : 'blue' }}>{winner}</span></p>
      </div>
    );
  }
}

class ElectionApp extends Component {
  render() {
    return (
      <div>
        <h1>2024 Election Live Dashboard</h1>
        <ElectionResult 
          stateName="Texas" 
          electoralVotes={40} 
          winner="Republican" 
        />
        <ElectionResult 
          stateName="California" 
          electoralVotes={54} 
          winner="Democrat" 
        />
      </div>
    );
  }
}

export default ElectionApp;

You can see the output in the screenshot below.

Remember, in a class component, you must use the this keyword to reference the props that belong to that specific instance.

Method 4: Handle Default Props

Sometimes, a parent component might forget to pass a specific prop. To prevent your app from breaking, you can set “Default Props.”

I always use this when building UI libraries to ensure the component has a fallback value for things like colors or labels.

Here is a “Starbucks Order” component where the size defaults to “Grande” if not specified:

import React from 'react';

const CoffeeOrder = ({ customerName, drinkType, size }) => {
  return (
    <div className="order-receipt">
      <h2>Starbucks Order Receipt</h2>
      <p>Customer: {customerName}</p>
      <p>Drink: {drinkType}</p>
      <p>Size: {size}</p>
    </div>
  );
};

// Setting Default Props
CoffeeOrder.defaultProps = {
  size: 'Grande',
  drinkType: 'House Blend Coffee'
};

const CafeApp = () => {
  return (
    <div>
      <h1>Seattle Coffee Shop Terminal</h1>
      {/* Size is not provided, so it will use the default "Grande" */}
      <CoffeeOrder customerName="Alice" drinkType="Caramel Macchiato" />
      
      {/* All props provided */}
      <CoffeeOrder customerName="Bob" drinkType="Iced Latte" size="Venti" />
    </div>
  );
};

export default CafeApp;

Pass Props Through Multiple Levels (Prop Drilling)

In large apps, you might need to pass props through several layers of components. This is often called “Prop Drilling.”

While it’s simple to do, I advise you to be careful. If you find yourself passing props through 5 or 6 layers, you might want to look into the React Context API.

Here is a simple example of passing data from a “United Airlines” booking system down to a passenger ticket:

import React from 'react';

// Grandchild Component
const Ticket = ({ flightNumber, gate }) => (
  <div className="ticket">
    <p>Flight: {flightNumber}</p>
    <p>Gate: {gate}</p>
  </div>
);

// Child Component
const BoardingPass = ({ passenger, flightInfo }) => (
  <div className="boarding-pass">
    <h3>Passenger: {passenger}</h3>
    <Ticket flightNumber={flightInfo.number} gate={flightInfo.gate} />
  </div>
);

// Parent Component
const FlightApp = () => {
  const flightData = { number: 'UA242', gate: 'B12' };

  return (
    <div className="airport-system">
      <h1>O'Hare International Airport (ORD)</h1>
      <BoardingPass passenger="Mark Stevens" flightInfo={flightData} />
    </div>
  );
};

export default FlightApp;

Common Issues to Avoid

Throughout my career, I’ve seen developers make a few recurring mistakes when getting props.

First, remember that props are immutable. You should never try to change a prop inside the child component. If you try to do props.name = “New Name”, React will throw an error or simply not re-render correctly.

Second, always use PropTypes or TypeScript in professional projects. This ensures that the data being passed is of the correct type (e.g., a number is actually a number and not a string).

Pro-Tip: Access Props via “children”

There is a special prop called children. This allows you to pass JSX or other components inside a component, just like HTML tags.

This is very common when creating layout wrappers or modals for US-based SaaS applications.

import React from 'react';

const FederalAlertBox = ({ children, level }) => {
  const bgColor = level === 'High' ? '#ffcccc' : '#e0e0e0';
  return (
    <div style={{ backgroundColor: bgColor, padding: '20px', border: '2px solid red' }}>
      <strong>OFFICIAL ALERT:</strong>
      {children}
    </div>
  );
};

const WarningApp = () => {
  return (
    <div>
      <FederalAlertBox level="High">
        <p>Severe weather warning for the Tri-State area. Please stay indoors.</p>
      </FederalAlertBox>
    </div>
  );
};

export default WarningApp;

In this case, the <p> tag is accessed via the children prop inside FederalAlertBox.

This tutorial covered several ways to get props in React. I hope you found it helpful and that it makes your development process smoother.