Props

Properties are immutable

Passing props

Properties are passed to components in the same way attributes are passed to HTML elements.

<User name="Carlos">

Within the component you can access properties through the props object that is passed as an argument to the component function.

function User(props) {
	return <h1>Hi {props.name}</h1>
}

A default value can be set for certain props. There are two ways to do it.

function User(props) {
	return <h1>Hi {props.name}</h1>
}

User.defaultProps = {
	name: "unknown user"
}

function User(nombre = "unknown user") {
	return <h1>Hi {nombre}</h1>
}

props can also be used to pass child components to other components.

function Layout(props) {
	return <main>{props.children}</main>
}

function App() {
	<Layout>
		<h1>Welcome to this application</h1>
	</Layout>
}