React Props

React Props

Props (which stands for properties) are the mechanism for passing data from one component (a parent) down to another component (a child) in React. They are functionally similar to function arguments in JavaScript and attributes in HTML.

Passing and Receiving Props

You pass props to a component exactly like how you add attributes to an HTML tag.

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

function App() {
  return <Welcome name="Alice" />;
}

Props are strictly read-only. A component must never modify its own received props. This rule ensures data flow predictability within your UI.