Sintaxe dos botões e dos labels para exibir valores

Não é intuitiva, não é direta, a ideia de como se faz o preenchimento de valor dos componentes.

Por exemplo, num arquivo de componente, temos um elemento assim:

  <input placeholder={props.placeholder} />

Em seguida, onde usaremos este componente, num arquivo em que vamos importá-lo, anotamos assim:

export const CaixaTexto = (props) => {
...
<input placeholder={props.placeholder} />
...
}

Isto faz todo o sentido, porque no HTML5, 'placeholder' é um atributo. Assim, em ambos os arquivos estamos lidando com atributos.

Entretanto, isto não acontece com os botões e com os labels. Por exemplo, no arquivo do componente 'Botao', anotamos o parâmetro associado à 'props' como valor da tag 'button' e não como um atributo desta tag.

export const Botao = (props) => {
  return (
    <button>{props.texto}</button>
  )
}

E, no arquivo em que vamos aplicar este componente, usamos a referência como atributo, tal como em

<Botao texto="Salvar" />

o que intuitivamente nos levaria a pensar em fazer diferente, tal como

<Botao>texto="Salvar"</Botao>

uma vez que no arquivo de criação do componente não era atributo, mas valor da tag.

Isto é ruim no React, porque atrapalha o aprendizado.