1
resposta

Uma abordagem diferente à implementação do instrutor

Como desafio, resolvi implementar a adição do comentário antes de assitir a aula e comparar com o que o intrutor faria. Isso trouxe algumas diferenças que eu achei interessante:

// Método para adicionar o comentário.
// Note o uso da arrow function, tornando o bind desnecessário
// na hora de chamar através do onPress do elemento TouchableOpacity.
addComment = () => {

    // Pegando do estado as informações que vou precisar, para
    // evitar de escrever this.state.sei.la várias vezes...
    const { foto, commentText } = this.state;

    // Strings vazias em JS retornam falso, isso facilita na hora de
    // testar se o comentário novo tem caracteres.
    if (!commentText)
        return;

    const comentarios = [...foto.comentarios, {
        id: commentText,
        login: 'Leonardo',
        texto: commentText
    }];

    const fotoAtualizada = { ...foto, comentarios };

    // Setando a nova foto e apagando o valor do TextInput.
    // Repare abaixo, no elemento TextInput, que ele está vinculado ao
    // estado do componente através do atributo value.
    this.setState({ foto: fotoAtualizada, commentText: '' })
}
<View style={styles.newComment}>
    <TextInput
        style={styles.input}
        placeholder={'Adicione um comentário'}

        onChangeText={commentText => this.setState({ commentText })}

        // Aqui é onde é feita a vinculação do valor do campo ao 
        // estado do componente.
        value={this.state.commentText} 
    />

    <TouchableOpacity onPress={this.addComment}>
        <Image
            style={styles.icon}
            source={require('../assets/img/send.png')}
        />
    </TouchableOpacity>

</View>

Estou aberto a sugestões e dúvidas... Bons estudos a todos!

1 resposta

Boa noite, Leonardo! Como vai?

Excelente implementação! Obrigado por compartilhar conosco! Assim todos crescemos juntos! Continue assim!

Grande abraço e bons estudos, meu aluno!