State
Entendendo sobre os estados de um componente
Modificando os estados de um componente
Agenda
estado
O state é o lugar onde armazenamos as informações importantes e que influenciam na renderização. Ele é gerenciado de dentro do componente.
constructor(props) {
super(props);
this.state = {
semaforo: null
};
}
estado inicial
this.setState({
propriedade: valor
});modificando estados
ficarAmarelo = () => {
this.setState({
semaforo: 'amarelo'
});
}
ficarVerde = () => {
this.setState({
semaforo: 'verde'
});
}
ficarVermelho = () => {
this.setState({
semaforo: 'vermelho'
});
}
render
render() {
return (
<div className="App">
<p>{this.state.semaforo}</p>
<button onClick={this.ficarVermelho}>vermelho</button>
<button onClick={this.ficarAmarelo}>amarelo</button>
<button onClick={this.ficarVerde}>verde</button>
</div>
);
}
Vamos praticar?
feedback é um presente
referências
Até a próxima!
