Aula 47
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: