Utilização de States no React

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

jsxconst 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:

jsxconst 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:

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

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

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

Vamos juntar tudo e obter o seguinte código:

jsximport 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.