Uso de estados en React

Utilizaremos la función useState para crear un estado que contenga el nombre del producto:

const state = useState('prod');

Como resultado, la constante state será un array, en cuyo primer elemento se almacenará el nombre del producto, y en el segundo, la función para cambiar el nombre:

const state   = useState('prod');
const name    = state[0];
const setName = state[1];

Para brevedad, normalmente no se utiliza una constante intermedia para el array, sino que se usa la desestructuración:

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

Ahora mostremos nuestro estado con el nombre del producto en algún markup:

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

Juntemos todo y obtendremos el siguiente código:

import React, { useState } from 'react';

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

export default App;

Si ejecutamos este código, inicialmente en el div se mostrará el valor inicial del estado, en nuestro caso 'prod'. Al cambiar el estado mediante la función setName, en el markup aparecerá automáticamente el nuevo valor del estado.

Supongamos que desea mostrar en la pantalla los datos del usuario: su nombre, apellido, edad. Cree para ello los estados correspondientes con valores iniciales.