Olá a todos! Tudo bem? Este vídeo vai ser sobre... Nós vamos adicionar uma mensagem de erro debaixo de cada campo de texto indicando o erro de validação. Nosso caso só tem o erro de requerimento, certo? Se o usuário digitar alguma coisa e deletar tudo. Por exemplo, eu vou digitar alguma coisa, aí eu deleto tudo. Isso já é norte que já fica vermelho, mas também que nós vamos adicionar a mensagem debaixo desse... Deixa o caixa de texto dizendo que o campo não pode ficar em branco, está em branco. Na mesma maneira, para o conteúdo. Agora para a mensagem da limite e caracteres não vai ter nenhuma mensagem porque o usuário já sabe que não pode digitar mais... Ele não pode digitar mais de 40 porque a gente usou a propriedade max length no vídeo anterior. Então só vai ter a mensagem dizendo que a propriedade é requerida. Para fazer isso, a gente tem que lembrar do nosso estado do aplicativo, a nossa store do Redux. Lembra que a gente definiu aquela validate field? Vamos aqui no PostNew, componente PostNew. A gente definiu a validate field aqui que seta o erro no estado do Redux. Change post error com a descrição do erro. Então lá no Reduxer, o PostFormRedux, tem esses propriedades chamadas TaroError e Barrier, que vão conter as descrições de cada erro ou contém não se não tiver nenhum erro. Então a gente pode usar esse cara aqui para mostrar o erro, a descrição do erro aqui. Então vamos lá, vamos aqui para o PostNew, estou no Post. Aqui debaixo dessa caixa de texto para o título, que na verdade está dentro do PostForm, então a gente tem que ir para o PostForm, então vamos lá para o PostForm. A gente pode sonar aqui um texto embaixo desse cara que vai ser a descrição do erro. Mas onde é que está esse erro? Está no estado do Redux, como é que a gente pega aquela propriedade e injeta no componente? É através daquela função chamada MapStateToProps, certo? Mas esse componente aqui, PostForm, não está conectado a Redux, mas quem é que está conectado a Redux? É o componente que contém o PostForm, nesse caso o componente PostNew, certo? O PostNew, se você ir lá embaixo, está conectado a Redux e tem o MapStateToProps aqui, que já inclui o titleError e barError que a gente fez antes. Então a gente só precisa passar esse cara como propriedade para o PostForm e o PostForm vai saber que tem um erro. E a gente já fez isso, você note que o PostForm a gente já passou como propriedade, o titleError e o barError. Então tudo que a gente precisa fazer é só chamar esse cara que está dentro da propriedade do PostForm. PostForm aqui, voltando a PostForm, lá para debaixo do TextInput do título, é só dizer this.props.taroError, certo? Nesse caso, se tiver um erro, vai aparecer o erro aqui dentro da componente Text. Eu dei o Hot Reloading, né? Se note que eu salvei aqui e automaticamente dei um update aqui que eu estou usando o Hot Reloading, que reinicia quando faz uma mudança no código, reinicia o aplicativo com o mesmo estado anterior, por isso que não voltou à tela inicial. Então apareceu aqui o título, não pode ser lá em branco, vamos digitar alguma coisa e já apareceu a mensagem, né? Certo? Agora eu acho que tem uma coisa que deixa eu remover esse negócio para ver o que acontece nesse espaço aqui. É, uma coisa para você notar aqui é se você tem o Text, componente Text, a gente usou Error e se tiver um erro, vai aparecer aqui, né? Deixa eu salvar, salvar Hot Reloading, aparece aqui, mas se não tiver erro, esse cara vira uma string em branco, né? Ou no, nesse caso é no, né? Esse cara é no, mas como tem no aqui, ainda vai ter o componente Text aparecendo, por isso que tem esse espaço entre a Text input e o conteúdo. Se note que a gente não tinha isso antes, se eu deletar esse texto aqui e salvar, você o espaço foi embora. Então se você quiser, não quiser ter esse espaço, você tem que fazer algo como, por exemplo, algo assim para se tiver, como é Error, Error, se tiver um erro, você põe o componente de Text com o Error, dessa maneira, ou nada, uma string vazia, certo? Eu estou usando o operador Ternário aqui, que é a mesma coisa que você fosse usando o condicional, se isso é verdadeiro, você pode pôr esse cara aqui, se esse cara for falso, você pode pôr uma string vazia. Nesse caso, string vazia vai aparecer, cadê? Error Text, must be wrapped in explicitly, Text component. O que que aconteceu aqui?