PR de correção. Não preicisa mergeear. #5
Conversation
Adicionado react
Adicionado React
Projeto WhatsLab
Versão final do exercício WhatsLab
| mensagens: [ | ||
| { | ||
| usuario: "", | ||
| conteudo: "", | ||
| }, | ||
| ], |
There was a problem hiding this comment.
Lembrem-se de começar o array vazio mesmo, sem nenhum objeto. Para que não fique nenhum bug no layout de um objeto vazio renderizado. Então o estado inicial mensagens deve ser assim:
state = {
mensagens: [],
...
}
| } | ||
|
|
||
| const novasMensagens = [... this.state.mensagens, novaMensagem] | ||
| this.setState({mensagens: novasMensagens}) |
There was a problem hiding this comment.
Um dica de UX. Quando vcs setam o estado com o novo array de mensagens, seria legal vcs setarem os valores do input controlado do estado como uma string vazia, para que o usuário tenha o campo de mensagem limpado depois de enviar a mensagem:
this.setState({
mensagens: novasMensagens,
valorInputUsuario: "",
valorInputConteudo: ""
})
| ) | ||
| return ( |
There was a problem hiding this comment.
Atenção com a identação do código. A constante listaDeMensagens está no mesmo nível do return, portanto, elas devem ter a mesma margem. A princípio, isso pode parecer mero detalhe, mas quando vcs começarem a escrever códigos grandes, isso ajuda muito na leitura.
| render() { | ||
| const listaDeMensagens = this.state.mensagens.map((mensagem) => { |
There was a problem hiding this comment.
Atenção para a identação aqui também. Como a const listaDeMensagens está dentro do render(), é bom que a margem da constante seja um pouco maior do que a margem do render, e não a mesma.
| <form> | ||
| <InputUsuario | ||
| value={this.state.valorInputUsuario} | ||
| onChange={this.OnChangeInputUsuario} | ||
| placeholder={"Usuário"} | ||
| /> | ||
| <InputMensagem | ||
| value={this.state.valorInputConteudo} | ||
| onChange={this.OnChangeInputConteudo} | ||
| placeholder={"Mensagem"} | ||
| /> | ||
| <BotaoEnviar | ||
| onClick={this.novaMensagem}> | ||
| Enviar | ||
| </BotaoEnviar> | ||
| </form> |
There was a problem hiding this comment.
Mais uma chatice minha de identação haha. Mas o componente pai é o form, certo? Então, tudo que está dentro dele, tem que ter uma margem um pouco maior do que a do componente. Como eu disse, essa questão da identação pode parecer detalhe agora, mas lá na frente vcs vão ver que faz a diferença um código bem identado.
|
Oi, dupla! Fiz alguns comentários no código, peço que vcs deem uma olhada. No geral, vcs estão de parabéns. Conseguiram aplicar o conteúdo que foi passado durante a semana e estão com um código bem legal. Deem uma olhadinha especial no estado inicial mensagens, com um objeto vazio dentro do array. Isso tá gerando um buguizinho no layout que é facilmente resolvível, é só começar o estado com uma array totalmente vazio: []. Mas nada demais o bug, não muda o bom trabalho que fizeram. Atenção para a identação do código também. Fiz alguns comentários ao longo do código sobre isso. Parabéns! |
PR de correção. Não preicisa mergeear.
http://acoustic-church.surge.sh/