En esta clase, estaremos revisando el ejemplo de la última clase y utilizando la composición de componentes para pasar el estado de manera eficiente.

function App() {
	const [state, setState] = React.useState('estado compartido');
	return (
		<React.Fragment>
			<TodoHeader>
				<TodoCounter />
				<TodoSearch />
			</TodoHeader>
			<TodoList />
				<TodoItem state={state} />
			</TodoList />
		</React.Fragment>
	);
}

function TodoHeader({ children }) {
	return (
		<header>
			{ children }
		</header>
	);
}

function TodoList({ children }) {
	return (
		<Section className="TodoList-container">
			{ children }
		</Section>
	);
}

function TodoCounter() {
	return <p>TodoCounter</p>
}

function TodoSearch() {
	return <p>TodoSearch</p>
}

function TodoItem ({ state }) {
	return <p>TodoItem: { state }</p>
}

Archivos de la Clase

Composición y colocación del estado en React

Clases Relacionadas

Estados compuestos con React.Component

Manejo del estado en React