Props · React · CodeMIRAI

Props

2 min read 3 runnable examples Quiz included

Props (properties) pass data into a component, the way arguments pass data into a function. They make one component reusable with different data.

A parent passes data to its children as props. Children can't change props; they call functions the parent passed down.

React (JSX)

function Greeting(props) {
  return <p>Hello, {props.name}! You are {props.age}.</p>;
}

function App() {
  return (
    <div>
      <Greeting name="Asha" age={21} />
      <Greeting name="Leo" age={30} />
    </div>
  );
}

Strings can be passed in quotes; anything else (numbers, booleans, arrays, objects, functions) goes in braces.

Destructuring props

Most React code unpacks props right in the parameter list:

React (JSX)

function CourseCard({ title, lessons, level = "Beginner" }) {
  return (
    <div style={{ border: "1px solid #ddd", borderRadius: 12, padding: 14, marginBottom: 10 }}>
      <h3 style={{ margin: 0 }}>{title}</h3>
      <small>{lessons} lessons · {level}</small>
    </div>
  );
}

function App() {
  return (
    <div>
      <CourseCard title="Python" lessons={64} />
      <CourseCard title="React" lessons={12} level="Intermediate" />
    </div>
  );
}

level = "Beginner" is a default value, used when the prop isn't passed.

Props are read-only

A component must never change its own props. Data flows down from parent to child; to change something, the parent passes new props (or a function, as you'll see with state).

The children prop

Whatever you put between a component's tags arrives as children:

React (JSX)

function Panel({ title, children }) {
  return (
    <section style={{ background: "#f6f7fb", borderRadius: 12, padding: 16 }}>
      <h3 style={{ marginTop: 0 }}>{title}</h3>
      {children}
    </section>
  );
}

function App() {
  return (
    <Panel title="Tip of the day">
      <p>Small components are easier to reuse.</p>
      <button>Got it</button>
    </Panel>
  );
}

This makes layout components like cards, modals and panels possible.

Finished this lesson?Mark it complete to earn +20 XP and move your progress on.