Reactividad de estados en React

Veamos ahora cómo funciona la reactividad. Hace que cuando se modifica un estado, los cambios se muestren instantáneamente en la pantalla.

Veamos un ejemplo. Supongamos que tenemos un estado con el nombre de un producto:

const [name, setName] = useState('prod');

Mostremos el nombre del producto en el maquetado:

return <div>
	<span>{name}</span>
</div>;

Hagamos ahora un botón, al pulsar el cual nuestro estado se modificará:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

En el manejador de clic usamos la función setName, para establecer un nuevo nombre para el producto:

function clickHandler() {
	setName('xxxx');
}

Juntemos todo nuestro código. Resultará que tras pulsar el botón el texto cambiará instantáneamente al nuevo valor:

function App() {
	const [name, setName] = useState('prod');
	
	function clickHandler() {
		setName('xxxx');
	}
	
	return <div>
		<span>{name}</span>
		<button onClick={clickHandler}>btn</button>
	</div>;
}

El uso de funciones manejadoras separadas no es obligatorio. Se puede usar una función flecha anónima:

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
		<button onClick={() => setName('xxxx')}>btn</button>
	</div>;
}

Se dan los estados con el nombre y apellido del usuario. Muéstralos en el maquetado. Haz botones para modificar estos estados.