React.js Tutorials
WhatsApp Channel
Join
Facebook Page
Follow

Props in React

📘 React.js 👁 47 views 📅 Nov 05, 2025
⏱ Estimated reading time: 2 min

Props (short for properties) are used to pass data from one component to another. They allow components to be dynamic and reusable.

What are Props?

  • Props are read-only

  • Passed from parent to child

  • Used to customize components

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Usage:

<Welcome name="Alice" />

Why Use Props?

  • Reuse components with different data

  • Keep components flexible

  • Separate logic and UI

Passing Multiple Props

function User({ name, age }) {
  return <p>{name} is {age} years old</p>;
}

<User name="John" age={25} />

Props with Different Data Types

<Product title="Laptop" price={800} inStock={true} />

  • Strings → "text"

  • Numbers / booleans → {}

Props Destructuring

Instead of:

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

Use:

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

Default Props

Provide default values if props are missing.

function Button({ text = "Click Me" }) {
  return <button>{text}</button>;
}

Props are Read-Only

❌ Incorrect:

props.name = "Bob";

✅ Correct:

  • Props should never be modified

  • Use state if data needs to change

Passing Components as Props (Children)

function Card({ children }) {
  return <div>{children}</div>;
}

Usage:

<Card>
  <h2>Title</h2>
  <p>Content</p>
</Card>

Props vs State

PropsState
Passed from parentManaged inside component
Read-onlyCan be updated
Makes components reusableManages dynamic data

Key Points

  • Props pass data to components

  • They are immutable

  • Destructuring improves readability

  • children is a special prop

🔒 Some advanced sections are available for Registered Members
Register Now
← Previous
React Components Basics
Next →
State in React
Share this Post
🚀 Want to Test Your Knowledge?

Take quizzes related to this topic and see where you stand!

Start Quiz Now
← Back to Tutorials

Popular Competitive Exam Quizzes

GK/GS Quiz | UPSC Exam Quiz | English Grammar Basics Quiz | Science Quiz