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!