Utilização de States no React

Vamos utilizar a função useState para criar um state contendo o nome do produto:

const state = useState('prod');

Como resultado, a constante state será um array, onde o primeiro elemento armazenará o nome do produto, e o segundo - a função para alterar o nome:

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

Para resumir, geralmente não se usa uma constante intermediária para o array, mas sim a desestruturação:

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

Agora vamos exibir nosso state com o nome do produto em algum markup:

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

Vamos juntar tudo e obter o seguinte código:

import React, { useState } from 'react';

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

export default App;

Se executarmos este código, inicialmente a div exibirá o valor inicial do state, no nosso caso 'prod'. Ao alterar o state através da função setName, o novo valor do state aparecerá automaticamente no markup.

Suponha que você queira exibir na tela os dados do usuário: seu nome, sobrenome, idade. Crie para isso os states correspondentes com valores iniciais.