Props & Data Flow — React Tutorial

Passing Data with Props

Props (short for properties) are how you pass data from a parent component to a child component. Props are read-only — a child component cannot modify the props it receives.

React follows a one-way data flow: data flows down from parent to child through props. This makes your app predictable and easier to debug.

Example

// Parent passes props to child
function App() {
  return (
    <div>
      <Greeting name="Alice" age={25} />
      <Greeting name="Bob" age={30} />
    </div>
  );
}

// Child receives props as an object
function Greeting({ name, age }) {
  return (
    <p>Hello, {name}! You are {age} years old.</p>
  );
}

// Default props
function Button({ label = "Click Me", color = "blue" }) {
  return (
    <button style={{ backgroundColor: color }}>
      {label}
    </button>
  );
}

Props are passed as attributes on the component tag
Use destructuring to extract props: { name, age }
Props are read-only — never modify props directly
You can set default values with default parameters
Any JavaScript value can be a prop: strings, numbers, arrays, objects, functions

Notes

The children prop is a special prop that contains whatever you put between the opening and closing tags of a component: This is children.

The Children Prop

The children prop lets you pass JSX content between the opening and closing tags of a component. This is perfect for wrapper components like cards, modals, and layouts.

Example

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

// Using the Card with children
function App() {
  return (
    <Card title="Welcome">
      <p>This content is passed as children.</p>
      <button>Click Me</button>
    </Card>
  );
}

Notes

The children pattern is very common in React. It's used by layout components, modals, error boundaries, and many UI libraries.