How to Pass Arguments to React Components

I have found that passing data between components is the most fundamental skill you need to master.

Whether you are building a small dashboard or a massive enterprise platform, you will constantly need to move information from one part of your app to another.

In this tutorial, I will show you exactly how to pass arguments to React components using different methods I use in my daily development work.

Table of Contents

Props in React

In React, we pass arguments to components using something called “props” (short for properties).

Think of props like arguments you pass into a JavaScript function; they allow your components to be dynamic and reusable.

Method 1: Pass Basic String and Numeric Arguments

The most common way to pass data is by adding attributes to the component tag, just like you would with HTML attributes.

In this example, let’s look at a component that displays information about popular US National Parks.

import React from 'react';

// This is the Child Component
const NationalParkCard = (props) => {
  return (
    <div style={{ border: '1px solid #ccc', padding: '20px', margin: '10px', borderRadius: '8px' }}>
      <h2>{props.parkName}</h2>
      <p><strong>Location:</strong> {props.state}</p>
      <p><strong>Established:</strong> {props.yearEstablished}</p>
      <p><strong>Annual Visitors:</strong> {props.visitorCount.toLocaleString()}</p>
    </div>
  );
};

// This is the Parent Component
const TravelApp = () => {
  return (
    <div style={{ padding: '40px' }}>
      <h1>Explore America's National Parks</h1>
      <NationalParkCard 
        parkName="Yellowstone" 
        state="Wyoming" 
        yearEstablished={1872} 
        visitorCount={3290242} 
      />
      <NationalParkCard 
        parkName="Grand Canyon" 
        state="Arizona" 
        yearEstablished={1919} 
        visitorCount={4732101} 
      />
    </div>
  );
};

export default TravelApp;

You can see the output in the screenshot below.

I prefer this method for simple data because it is very readable and follows a pattern similar to standard HTML.

Method 2: Use Object Destructuring for Cleaner Code

As your components grow, typing props.something repeatedly becomes tedious and makes the code cluttered.

I almost always use ES6 destructuring to “unpack” the arguments right in the function signature.

Let’s use a real estate example based on property listings in New York City.

import React from 'react';

// Destructuring props directly in the argument list
const PropertyListing = ({ address, price, bedrooms, sqft, isAvailable }) => {
  return (
    <div style={{ backgroundColor: '#f9f9f9', padding: '15px', marginBottom: '20px', borderLeft: '5px solid #007bff' }}>
      <h3>{address}</h3>
      <ul style={{ listStyleType: 'none', padding: 0 }}>
        <li><strong>Price:</strong> ${price.toLocaleString()}</li>
        <li><strong>Size:</strong> {bedrooms} Bedroom / {sqft} sq. ft.</li>
        <li><strong>Status:</strong> {isAvailable ? '✅ Active' : '❌ Pending'}</li>
      </ul>
    </div>
  );
};

const RealEstatePortal = () => {
  return (
    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
      <h2>NYC Real Estate Listings</h2>
      <PropertyListing 
        address="123 Upper East Side, NY" 
        price={1250000} 
        bedrooms={2} 
        sqft={1100} 
        isAvailable={true} 
      />
      <PropertyListing 
        address="456 Brooklyn Heights, NY" 
        price={950000} 
        bedrooms={1} 
        sqft={850} 
        isAvailable={false} 
      />
    </div>
  );
};

export default RealEstatePortal;

You can see the output in the screenshot below.

How to Pass Arguments to React Components

This approach makes it immediately clear which variables the component expects, which is a huge help for team collaboration.

Method 3: Pass Objects and Arrays as Arguments

Sometimes you have a large dataset, like a list of Fortune 500 companies or a user profile object.

Instead of passing ten individual props, I find it much cleaner to pass a single object or an array.

import React from 'react';

const CompanyProfile = ({ companyData }) => {
  return (
    <div style={{ border: '1px solid #14213d', padding: '20px', margin: '10px' }}>
      <h2 style={{ color: '#fca311' }}>{companyData.name}</h2>
      <p><strong>CEO:</strong> {companyData.ceo}</p>
      <p><strong>Headquarters:</strong> {companyData.hq}</p>
      <h4>Major Offices:</h4>
      <ul>
        {companyData.offices.map((office, index) => (
          <li key={index}>{office}</li>
        ))}
      </ul>
    </div>
  );
};

const BusinessDirectory = () => {
  const techGiant = {
    name: "Apple Inc.",
    ceo: "Tim Cook",
    hq: "Cupertino, California",
    offices: ["Austin", "Seattle", "New York", "Miami"]
  };

  return (
    <div>
      <h1>US Tech Sector Directory</h1>
      <CompanyProfile companyData={techGiant} />
    </div>
  );
};

export default BusinessDirectory;

You can see the output in the screenshot below.

Passing an object keeps the parent component’s JSX much cleaner, though you should be careful about deep nesting.

Method 4: Pass Functions as Arguments (Event Handling)

In React, data flows down, but actions flow up. To “pass an argument back” to a parent, you pass a function as a prop.

I use this constantly for things like “Add to Cart” buttons or “Submit Application” forms.

Let’s look at a simple voting system for the best BBQ style in the US.

import React, { useState } from 'react';

const VoteButton = ({ label, onVoteClick }) => {
  // We pass the label back to the parent when clicked
  return (
    <button 
      onClick={() => onVoteClick(label)}
      style={{ padding: '10px 20px', margin: '5px', cursor: 'pointer' }}
    >
      Vote for {label}
    }
    </button>
  );
};

const BbqPoll = () => {
  const [totalVotes, setTotalVotes] = useState(0);
  const [lastVoted, setLastVoted] = useState('None');

  const handleVote = (styleName) => {
    setTotalVotes(totalVotes + 1);
    setLastVoted(styleName);
    alert(`Thank you for voting for ${styleName} BBQ!`);
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Great American BBQ Poll</h1>
      <p>Total Votes Cast: {totalVotes}</p>
      <p>Latest Selection: <strong>{lastVoted}</strong></p>
      <hr />
      <VoteButton label="Texas Style" onVoteClick={handleVote} />
      <VoteButton label="Kansas City Style" onVoteClick={handleVote} />
      <VoteButton label="Carolina Style" onVoteClick={handleVote} />
    </div>
  );
};

export default BbqPoll;

You can see the output in the screenshot below.

This pattern is essential for creating interactive applications where child components need to trigger state changes in the parent.

Method 5: Use Children as an Argument

Sometimes you don’t want to pass just data; you want to pass entire blocks of HTML or other components.

React provides a special prop called children for this exact purpose. I use this for “Wrapper” components like Modals or Layout containers.

import React from 'react';

const InfoSection = ({ title, children }) => {
  return (
    <section style={{ border: '2px solid #000', margin: '20px', padding: '20px' }}>
      <h2 style={{ borderBottom: '1px solid #eee' }}>{title}</h2>
      <div className="section-content">
        {children}
      </div>
    </section>
  );
};

const FederalGovernmentPage = () => {
  return (
    <div>
      <h1>USA Government Structure</h1>
      
      <InfoSection title="Legislative Branch">
        <p>The Legislative Branch consists of the House of Representatives and the Senate.</p>
        <ul>
          <li>Senate: 100 members</li>
          <li>House: 435 members</li>
        </ul>
      </InfoSection>

      <InfoSection title="Executive Branch">
        <p>The power of the Executive Branch is vested in the President of the United States.</p>
        <button onClick={() => window.open('https://www.whitehouse.gov')}>Visit White House Website</button>
      </InfoSection>
    </div>
  );
};

export default FederalGovernmentPage;

Using children makes your components incredibly flexible because the parent controls the content while the child controls the styling and layout.

Pass Arguments with Default Values

In my experience, it is a good practice to provide default values for your arguments. This prevents your app from crashing if a piece of data is missing.

import React from 'react';

const WeatherWidget = ({ city = "Washington D.C.", temp = 70, condition = "Sunny" }) => {
  return (
    <div style={{ padding: '10px', backgroundColor: '#e3f2fd', width: '200px' }}>
      <h4>{city}</h4>
      <p>{temp}°F - {condition}</p>
    </div>
  );
};

const Dashboard = () => {
  return (
    <div>
      <h2>Local Weather Reports</h2>
      {/* Uses provided values */}
      <WeatherWidget city="Los Angeles" temp={85} condition="Clear" />
      
      {/* Uses default values for missing props */}
      <WeatherWidget />
    </div>
  );
};

export default Dashboard;

I find this specifically useful when dealing with API data that might occasionally return null or undefined values.

In this tutorial, I have covered several ways to pass arguments to React components, from basic props to functions and children.

Understanding how to efficiently move data between components will make your code much cleaner and easier to maintain.