A prop (property) is a value a parent assigns when it creates a React element. Props let instances of one component render differently without duplicating the component. A child reads its props; it does not edit or add to them. In a class component, they are available on `this.props`. section 2.5 section 2.5.1
Give each link its own destination
A reusable `Link` can read `this.props.framework` for its text and `this.props.url` for its anchor's `href`. Its parent creates instances with different values: `React.createElement(Link, { framework: "React", url: "//react.dev" })`. The custom component receives instructions; the `<a>` element receives an HTML attribute. section 2.5.1 section 2.5.2
In JSX, pass props with attribute-like syntax: `<ProfileLink url="/users/johnny" label="Profile for Johnny" />`. Inside the class, `href={this.props.url}` puts the URL into the rendered anchor. Curly braces supply a JavaScript value rather than fixed text. section 3.2.5
The receiving component determines how to use a prop:
- A function component receives a `props` argument. It can read `props.href` and `props.label`, as a menu item does. section 4.1.1
- Nested content is available as `props.children` (or `this.props.children`). A link can render its child text or a nested `<strong>` inside its anchor. section 3.2.5
- A prop can be a function. A styled button can receive `handleClick` from its parent and use it when clicked; a wrapper can call the callback without passing along the button's event object. section 8.6
Props can also govern later behavior. An effect depending on `[title]` updates the document title when that prop changes. By contrast, initializing state from a prop with `useState` does not automatically copy later prop changes into that state; an effect can synchronize them when needed. section 6.1.4
Passing props through several components works, but can become cumbersome when intermediate components only forward a value. A dashboard's user name, for example, must travel through components that do not display it before reaching the header button and welcome message. section 10.1
Listing 4.2 Menu application using functions
import "./App.css";
function App() { #1
return (
<main>
<Menu />
</main>
);
}
function Menu() { #1
return (
<nav className="navbar">
<h1 className="title">TheMenuCompany</h1>
<ul className="menu">
<MenuItem label="Home" href="/" />
<MenuItem label="About" href="/about/" />
<MenuItem label="Blog" href="/blog" />
</ul>
</nav>
);
}
function MenuItem(props) { #2
return (
<li className="menu-item">
<a className="menu-link" href={props.href}>
{props.label}
</a>
</li>
);
}
export default App;
Compare the parent menu's `label` and `href` assignments with the function component's `props.label` and `props.href` reads. section 4.1.1
