Props in React

React.js 105 views Nov 05, 2025 2 min read

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?

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

Usage:

<Welcome name="Alice" />

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

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

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

Instead of:

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

Use:

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

Provide default values if props are missing.

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

❌ Incorrect:

props.name = "Bob";

✅ Correct:

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

Usage:

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

Some advanced sections are available for Registered Members

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