Passing Data via Props

Understanding data passing to props is essential for every React developer. Props can carry any valid JavaScript value. This includes strings, numbers, booleans, arrays, objects, functions, and even other React components (using JSX). Below are detailed examples of each type.

Watch Tutorial

Types of Data You Can Pass as Props

3.1 String Props

function Badge({ label, color }) {
  return <span style={{ background: color }}>{label}</span>;
}

// Usage
<Badge label="Admin" color="#0A76FF" />
<Badge label="Editor" color="#00C9B8" />

3.2 Number Props

function ProgressBar({ value, max }) {
  const pct = Math.round((value / max) * 100);
  return <div>{pct}% complete</div>;
}

// Usage — note: numbers go in curly braces, not quotes
<ProgressBar value={75} max={100} />

3.3 Boolean Props

Booleans are frequently used for toggling features like disabled buttons, visible sections, or loading states. When you pass a boolean prop without a value, it defaults to true:

function Button({ label, disabled }) {
  return <button disabled={disabled}>{label}</button>;
}

// Both lines below are equivalent
<Button label="Save"   disabled={true} />
<Button label="Submit" disabled />         // shorthand for disabled={true}
<Button label="Cancel" disabled={false} /> // button is enabled

3.4 Array Props

function TagList({ tags }) {
  return (
    <ul>
      {tags.map((tag, index) => (
        <li key={index}>{tag}</li>
      ))}
    </ul>
  );
}

// Usage
<TagList tags={["React", "JavaScript", "Frontend", "Props"]} />

3.5 Object Props

function UserCard({ user }) {
  return (
    <div>
      <h3>{user.name}</h3>
      <p>Email: {user.email}</p>
      <p>Role: {user.role}</p>
    </div>
  );
}

// Usage
const currentUser = { name: "Rahat Hussain", email: "rahat@7scribes.com", role: "Founder" };
<UserCard user={currentUser} />

3.6 Function Props (Callbacks)

Passing functions as props is how child components communicate back to their parents. This pattern is called “lifting state up” — the parent owns the state and passes down a function to update it:

function ConfirmButton({ onConfirm, label }) {
  return <button onClick={onConfirm}>{label}</button>;
}

function App() {
  function handleConfirm() {
    alert("Confirmed!");
  }

  return <ConfirmButton onConfirm={handleConfirm} label="Confirm Order" />;
}

3.7 JSX / Component Props

You can pass entire JSX elements or components as props. The special children prop is the most common example:

function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

// Usage
<Card title="Getting Started">
  <p>Welcome to React Props! This paragraph is passed as children.</p>
  <button>Learn More</button>
</Card>

4. Default Props

Sometimes a component should have sensible default values for its props in case the parent does not provide them. There are two modern ways to define default values.

4.1 Default Values in Destructuring

The cleanest approach in modern React is to set defaults directly in the function parameter destructuring:

function Avatar({ name = "Anonymous", size = 50, color = "#0A76FF" }) {
  return (
    <div style={{ width: size, height: size, background: color }}>
      {name[0].toUpperCase()}
    </div>
  );
}

// All three are valid:
<Avatar name="Rahat" size={80} color="#00C9B8" />
<Avatar name="Guest" />   // size=50, color="#0A76FF"
<Avatar />                // name="Anonymous", size=50, color="#0A76FF"

4.2 defaultProps (Legacy)

Older React codebases often use the static defaultProps property on the component function. While this still works, it is less preferred in modern React with hooks:

function Avatar({ name, size, color }) {
  return (
    <div style={{ width: size, height: size, background: color }}>
      {name[0].toUpperCase()}
    </div>
  );
}

Avatar.defaultProps = {
  name: "Anonymous",
  size: 50,
  color: "#0A76FF",
};

Best Practice: Prefer default parameter values in destructuring (Option 1) over defaultProps. It is more concise, supported natively by JavaScript, and easier to understand at a glance. The defaultProps approach is being gradually phased out in the React ecosystem.

FAQs

1. Do I always need curly braces when passing props?

Only for non‑string values. Strings can be passed in double quotes. Numbers, booleans, arrays, objects, and functions must be wrapped in {}.

// Correct
<Component text="Hello"      // string - quotes
          count={42}          // number - braces
          isActive={true}     // boolean - braces
          items={[1,2,3]}     // array - braces
          user={{ name: 'Alex' }} // object - braces
/>

2. What happens if I pass the wrong data type to a prop?

React won’t crash, but the component may behave unexpectedly (e.g., trying to call .map() on a string). To catch type mistakes early, use PropTypes or TypeScript.

import PropTypes from 'prop-types';

function TagList({ tags }) {
  return <ul>{tags.map(t => <li>{t}</li>)}</ul>;
}

TagList.propTypes = {
  tags: PropTypes.array.isRequired  // warns if not an array
};

3. Can I pass a React component as a prop (not just JSX)?

Yes. You can pass a component class or function as a prop and then render it inside the child. This is useful for dynamic layouts.

function IconButton({ icon: IconComponent, label }) {
  return <button><IconComponent /> {label}</button>;
}

// Usage: pass a component reference (not JSX)
<IconButton icon={UserIcon} label="Profile" />

4. How do default props work when a prop is explicitly passed as undefined?

If you pass undefined for a prop that has a default value, React uses the default. But if you pass null or false or 0, the default is not used – your explicit value wins.

function Greet({ name = "Guest" }) {
  return <h1>Hello {name}</h1>;}
<Greet name={undefined} />   // "Guest" (default used)
<Greet name={null} />        // "null" (no default)
<Greet name="" />            // "" (empty string, no default)

5. What is the difference between passing an array prop vs. passing multiple individual props?

Arrays are great when you don’t know how many items you’ll have (e.g., a list of tags). Individual props are better for fixed, named values (e.g., title, subtitle). Use whichever makes the component’s API clearer.

// Array prop – flexible for dynamic lists
<TagList tags={["React", "Props"]} />
// Individual props – good for fixed configuration
<UserCard name="John" age={30} email="john@example.com" />