Um momento
Aula 47
Cursos / CRUD com o Redux (e React Native)
Adicionamos uma Mensagem de Erro Debaixo do Campo de Conteúdo

Summary

# Resumo do Transcript

O instrutor discute como lidar com mensagens de erro em um aplicativo React Native, enfatizando as diferenças em relação ao React para Web. 

## Principais Pontos:

- **Tratamento de Erros:**
  - No React Native, todo texto deve estar dentro de um componente `<Text>`, ao contrário do que ocorre no React Web.
  - Se houver um erro no título (por exemplo, se o título for `null` ou `undefined`), deve-se exibir um `<Text>` com a descrição do erro. Caso contrário, nada será exibido.

- **Estratégias de Implementação:**
  - O instrutor sugere usar um ternário para decidir se o erro deve ser exibido. Se o espaço em branco for um problema, o ternário pode ser removido.
  - Uma abordagem alternativa é criar uma função de auxílio (`helper`) que utilize uma declaração `if` para retornar os erros, evitando código longo e melhorando a legibilidade.

- **Estilos:**
  - O instrutor menciona a adição de estilos para os componentes de erro, como definir a cor do texto como vermelho.

- **Adição de Erros:**
  - O conceito apresentado para o `title error` deve ser igualmente aplicado ao `body error`, implementando um componente de texto para a mensagem de erro do corpo.

- **Refatoração:**
  - O instrutor encoraja a refatoração do código para melhor organização, como a criação de um arquivo de estilos e a utilização de helpers para diminuir a complexidade e o tamanho do código.

- **Encerramento:**
  - O vídeo termina com agradecimentos e um convite para que os espectadores pratiquem as atividades sugeridas.

**Objetivo Geral:** Ensinar como adicionar mensagens de erro abaixo de cada campo de texto em um formulário no React Native.

Video Transcript

Ah, desculpa, que isso é permitido no React para Web, mas não é permitido no React Native porque todo string test tem que estar dentro de uma text, component text, por isso que está dando eu então em vez de string vazia vou pôr no, certo? Então pôr no aqui, a ser nada Então se tiver algum erro de título, se esse cara não for no ou indefinido, ele vai pôr um componente de texto com o erro, a descrição do erro Se isso não for definido, tiver no, não vai pôr nada na tela, com isso a gente tem aquele problema do espaço aparecer ali mas se você gostar do espaço, só não precisa ter esse ternário aqui Você pode também refatorizar esse negócio e em vez de usar o ternário aqui você pode fazer uma função de ajuda Aqui antes do render pode chamar rendereroncq que faz um if statement Se isso aqui for verdade, verdadeiro você retorna a esse, certo? Depende de você, eu vou deixar como exercício para você fazer e chama esse helper aqui desse cara aqui dessa maneira em vez de ter tudo assim, chama esses para você fazer se quiser Então eu vou voltar para o ternário, o kit antes e deixar assim mesmo Agora apareceu aquele title error, se digitar alguma coisa Você pode adicionar estilos para esse título, se quiser Style aqui Color red Algo assim Não acho que esse negócio já está meio long, então é melhor fazer aquele função de ajuda Certo, deixa eu dar um soft wrap aqui Agora vamos adicionar a mesma coisa para o conteúdo Vamos lá, a gente recebe como propriedade do post new Esse body error, então da mesma maneira que a gente fez o title error Eu quero que você faça também o body error, então vai aqui De baixo desse cara e da mesma maneira adicione a mensagem de erro do conteúdo Vou esperar você fazer antes de continuar E aí, está tudo certo? Então vamos lá, vamos adicionar o texto, componente text, com o des, ponto props, ponto Body error Certo? Vamos ver se funciona, apareceu Vou adicionar um estilo Color red Agora o vermelho Vou fazer aquele mesmo esquema do props body error O pera do ternário retorna o texto, se tiver o erro definido, senão só retorna no Certo? Certo? Já espero que tenham gostado, eu acho que tem Muita coisa que você pode refatorizar aqui, eu deixei tudo explícito E usando o operador do ternário, e fica meio longo Mas você pode quebrar a linha ou fazer aquele esquema do rendererror Certo? Vou deixar com meus exercícios E também pode fazer um folho de estilos e essas coisas Mas aqui meu foco é a funcionalidade e Espero que você tenha aprendido como adicionar esse mensagem de erro De baixo de cada campo de texto Certo? Obrigado por assistir e até o próximo vídeo
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: