Fala Matheus,tudo bem? estou bem sim!vou deixar o código inteiro aqui.
App.js
adicionarCategoria(nomeCategoria){
const novoArrayCategorias = [...this.state.categorias,nomeCategoria];
const novoEstado = {...this.state,categorias:novoArrayCategorias};
this.setState(novoEstado)
}
render(){
return(
<ListaCategorias
adicionarCategoria={this.adicionarCategoria.bind(this)}
categorias={this.state.categorias}/>
)
}
ListaCategorias.jsx
handleEventoInput(e) {
if (e.key == "Enter") {
let valorCategoria = e.target.value;
this.props.adicionarCategoria(valorCategoria);
}
}
<section className="lista-categorias">
<ul className="lista-categorias_lista">
{this.props.categorias.map((categoria, index) => {
return (
<li key={index} className="lista-categorias_item">
{categoria}
</li>
);
})}
</ul>
<input
type="text"
className="lista-categorias_input"
placeholder="Adicionar Categoria"
onKeyUp={this.handleEventoInput.bind(this)}
/>
</section>