Tutorials › React Modern Development › Props

Props

5 min read Quiz at the end

Props pass data from parent to child like HTML attributes: <Card title='Hello' count={5} />. Destructure props in the function: function Card({ title, count }). Props are read-only — never modify them inside the child.

Props

// Pass data to components via props
function Card({ title, body, image = "default.jpg" }) {
  return (
    
      
      {title}
      {body}
    
  );
}

// Use it


// Spread props
const data = { title: "Hello", body: "World" };

← Components Next: useState →

Topic Quiz · 5 questions

Test your understanding before moving on

1. What are props?

💡 Props (properties) are read-only data passed from a parent to a child component.

2. Can a child directly modify props?

💡 Props are immutable — a child cannot change them. Use state for mutable data.

3. What does ...props (spread) do?

💡 The spread operator passes all props down: <Component {...data} />.

4. What is prop drilling?

💡 Prop drilling is the pattern of passing data through many nested components.

5. How do you set a default prop value?

💡 Default values can be set in destructuring: function Comp({ name = "default" }).

Quick Access

Props

Props

{title}

Test your understanding before moving on