How Props Work

💻 React

How Props Work

Props are passed from a parent component to a child component via JSX attributes. The child component receives those props as a JavaScript object and can read values off of it to render dynamic content.

Watch Tutorial

2.1 Passing Props to a Component

Below is the most basic example of passing props in React:

// Parent Component
function App() {
  return     <div>
<Greeting name="Alice" role="Developer" />
<Greeting name="Bob"   role="Designer"  />
</div>  );}

// Child Component

function Greeting(props) {  
return (
 <h2>
Hello, {props.name}! You are a {props.role}
</h2> );
}

In this example, the App component passes two props [ name and role] to the Greeting component. The Greeting component receives them through its props object and uses them to render a personalized message.

2.2 Destructuring Props

Destructuring is the most common and recommended way to access props. Instead of writing props.name and props.role, you can destructure them directly in the function signature:

// Using destructuring in function parameter

function Greeting({ name, role }) {
return (
 <h2>
Hello, {name}! You are a {role}.
</h2>);
}

Destructuring makes the code cleaner and more readable, especially when a component receives many props. It immediately shows the reader exactly which props the component depends on.

2.3 Props Are Read-Only

This is one of the most important rules in React: a component must never modify its own props. Props are immutable from the child component’s perspective. This rule ensures that data flows predictably from parent to child and that components behave like pure functions, given the same props, they always produce the same output.

Important Rule

Never mutate props inside a child component. If a child needs to change data, it should communicate back to the parent via a callback function passed as a prop. Direct mutation of props is a violation of React’s data-flow principles.

FAQs

1. Can a child component change the value of a prop it receives?

No. Props are read‑only for the child. React sends data only from parent to child. If a child needs to change a value, the parent must pass a callback function as a prop. The child calls that function to ask for a change.

// Correct way: child asks parent to change the value
function Child({ value, onValueChange }) {
  return <button onClick={() => onValueChange(value + 1)}>Increment</button>;
}

2. What if I try to change a prop directly inside a child component?

React won’t show an immediate error (unless you use strict mode), but changing props breaks React’s rules and causes bugs. The original value stays the same in the parent, but the child shows a changed version – that makes the UI inconsistent. Always treat props as read‑only.

3. Is destructuring props required? What are the benefits?

No, it’s not required – but it’s highly recommended. Benefits:

Cleaner code: you write name instead of props.name.
Clearer: you see exactly which props the component uses.
Easier to change later: renaming a prop is simple.

// Without destructuring (works, but longer)
function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

// With destructuring (shorter and cleaner)
function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

4. Can I pass any type of data as a prop?

Yes. Props can hold any JavaScript value:

Strings, numbers, booleans
Arrays, objects, functions
Even other React components (using the children prop or similar patterns)

<MyComponent 
  name="Alice"              // string
  age={30}                  // number
  isActive={true}           // boolean
  items={['a', 'b', 'c']}   // array
  user={{ id: 1, role: 'admin' }}  // object
  onClick={handleClick}     // function
/>

5. What is the difference between props and state?

Props are read‑only and are passed from a parent component. The child cannot change them.
State is managed inside a component. The component can change its own state using a setter function like setState or the useState setter.

Think of it this way:

Props = data that comes from outside (like function arguments).
State = data that lives inside a component and can change over time (like a counter or form input).

Simple rule: Use props for things that don’t change inside the component. Use state for things that do change (like button clicks, typing in a box, or data from an API).