Então o que a gente vai fazer é ao input vamos dar um valor. Primeiro dá um valor, pode ser em branco primeiro e também a gente tem que definir um onChange. Tá bom? Mas antes de fazer isso, só demonstrar o que acontece se a gente dá um valor a isso. Se botar valor a alguém, vou salvar o que acontece. Vai aparecer o valor a alguém aqui, mas dá para pagar? Não dá para pagar, nem dá para digitar nada. Aqui o valor é fixo, tá bom? E toda vez que eu mudar o valor, o React vai pegar o valor aqui, como o valor é fixo, vai sempre ser alguém. A maneira que a gente vai fazer o componente controlado, a gente tem que definir o valor com a variável do estado, do React. Tá bom? Então em vez de ser valor fixo, a gente tem que olhar no estado. O valor, vamos mudar o nome da variável para ser nome. E como é que a gente vai inicializar esse estado? Tem várias maneiras, pode ser no constructor, constructor, mas também pode ser assim diretamente só dando o state. Segui uma das maneiras mais novas de definir o estado. Então vou definir o estado aqui inicial, nome para ser alguém, salvar, senorte que tem alguém aqui, ainda não dá para digitar, que é um valor fixo, mas eu estou acessando o valor do estado. E é isso que a gente quer para o primeiro passo para fazer o componente controlado. O valor tem que ser do estado do componente. Aqui eu tenho o componente app, eu estou definindo o estado inicial assim e a variável nome, que é o valor inicial. Tá bom? Agora não dá para digitar nada, o valor aqui está fixo. Para isso a gente precisa da chamada função onChange. Tá bom? Esse evento onChange acontece toda vez que você digitar uma coisa nova na caixa de texto ou se apagar alguma coisa. Então a gente vai definir a função onChange, vamos chamar o nome change, eu vou deixar em inglês para seguir esse standard, normalmente gosto de nomear minhas funções onChange com o nome da variável dentro da palavra onChange. Por exemplo, se fosse idade eu ia falar onIdadeChange e assim por diante. Normalmente program em inglês e não sei se você tem um padrão em português, mas se tiver, por favor use. Então vou botar onNomChange, tá bom? E vou definir a função do componente, então ponto V, ponto onNomChange. Tá bom? Então vamos definir aqui, deixa eu botar um soft wrap para você ver na outra linha. Então eu vou definir a função antes do render, chamada onNomChange, tá bom? Vai ser uma função assim e essa função tem um argumento chamado event, tá bom? Que é o evento que aconteceu. O que eu vou fazer? Vou dar um console log do evento só para você ver o que é. Então quando eu mudar o valor da caixa de texto, vai chamar a função thisOnNomChange, que é essa aqui, que tem o evento como parâmetro e vamos dar o console log para ver o que é esse evento, esse objeto. Voltando ao navegador, deixa eu clicar processar. Ah, desculpe, deixa eu mudar a caixa de texto. Eu dei um backspace ali, você nota que apareceu o console log. Esse objeto tem um proxy, se eu dar um alunado tem um handler e não sei o que, várias coisas. Get, não sei o que, isRevoked. Tem várias coisas dentro informando você o que é que os detalhes desse evento que aconteceu. Mas a coisa que a gente se importa mais é o event.target, tá bom? Event.target se refere ao aquele que acionou o evento. Nesse caso foi essa input. Vou dar um console log só para ver o que acontece. Vou aqui digitar alguma coisa. O sinote que deu um console log do input. O event.target é aquele que aciona o evento, nesse caso onChange. Então, é isso que a gente está interessado. Event.target, esse event.target tem um type, tem um name, tem um value, como atributos ou chamados propriedades no react. A gente está interessado na propriedade do valor, que é o value, que é aquilo que a gente digitou. Então, vou salvar aqui e vai atualizar automaticamente lá. Vamos digitar alguma coisa. Digitei, você note que ele deu alguém aqui, g. Eu digitei a letra g e apareceu aqui um console log, embora que não tenha aparecido no input, porque a gente não mudou o valor do estado. Por isso que ainda está aparecendo alguém aqui, embora que o console log tenha o g. No final. Então, a gente aprendeu como pegar o valor do input da coisa que a gente digitou. A gente só precisa mudar esse estado aqui para o novo valor, porque na hora que você muda o... Na hora que a única... O único jeito de você mudar esse nome aqui é mudando o estado. E por mudar o estado, vai fazer o react chamar a função render novamente. Toda vez que muda o estado do componente, a função render é chamada de novo. Então, o que a gente vai fazer no onNomeChange? Vamos fazer thisSetState. Essa função setState é usada para atualizar ou mudar o estado do componente. É sempre assim. Você não pode fazer assim diretamente, não pode, porque tem que ser... É uma questão de imutability no inglês, que o estado é imutável e você só pode mudar o estado se você fazer uma cópia do estado e botar a cópia por cima do estado anterior. Não pode modificar o estado diretamente. Tá bom? Por isso que a gente não pode diretamente mudar o estado assim. Tem que ser sempre que chamar essa função setState, que é parte do componente, palavra chave desse. Então, a gente vai dar o setState, passa um objeto com o nome da propriedade que a gente quer atualizar, nesse caso vai ser o nome e o novo valor de nome, que vai ser o que? Vai ser event.target.value. Tá bom? O salvar. Vamos ver o que vai acontecer quando a gente digitar. Deu um erro. Vamos ler o erro. Uncalled type error, cannot read property setState of undefined. Tá dizendo que tá chamando setState nessa palavra chave vez que não está definida. Por que que aconteceu isso? Porque a gente não deu um bind na função pro componente. Se você dar um console log aqui, eu já expliquei isso em vídeos anteriores, a palavra