Components and Props
Passing Props
Written by Swapnil RajaPublished
Props are the arguments of a component. A parent passes them down; the child reads them and never writes to them.
Passing and reading
Anything after the component name in JSX becomes a property of one object, handed to the function as its first argument. Strings use quotes; everything else uses braces.
Every prop type
jsx
function Profile(props) {
return (
<div style={{ border: "1px solid #cbd5e1", padding: 12, borderRadius: 8 }}>
<strong>{props.name}</strong> — {props.role}
<p>Visits: {props.visits}</p>
<p>Admin: {props.isAdmin ? "yes" : "no"}</p>
<p>Tags: {props.tags.join(", ")}</p>
</div>
)
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
<Profile
name="Ada"
role="Engineer"
visits={12}
isAdmin={true}
tags={["maths", "computing"]}
/>
)