estoy dando mis primeros pasos con React y me encontre con un problema el cual no puedo resolver.
Tengo un componente Padre el cual tiene en el this.state un array. Este array por el momento lo renderizo en un h2
Luego tengo componentes hijos, el cual al apretarlos, pushea data nueva al array. Verifico con un console.log(array) y definitivamente se esta agregando data al arreglo pero no se visualiza en el DOM (no se esta renderizando nuevamente el componente padre)
Pedidos.js
class Pedidos extends Component {
constructor(props){
super(props);
this.state={
items:["cafe"],
pedido:"",
}}
agregarCarrito=(item)=>{
this.state.items.push(item)
console.log(this.state.items);
}
render() {
return(
<div className="pedidoscont">
<h2>items: {this.state.items}</h2>
<Card item="Cafe cortado" price="$200" imagen={Cafe} agregarCarrito={this.agregarCarrito}/>
<Card item="Cafe con leche" price="$180" imagen={Cafe} agregarCarrito={this.agregarCarrito}/>
</div>
);
}}
export default Pedidos;
Card.js
class Card extends Component{
constructor(props){
super(props);
this.state={
user:"null"
}
}
agregar=()=>{
this.props.agregarCarrito(this.props.item);
console.log("add");
}
render() {
return(
<div className="card" onClick={this.agregar}>
<img src={this.props.imagen}></img>
<h2 className="item">{this.props.item}</h2>
<h3 className="price">{this.props.price}</h3>
</div>
);
}}
export default Card;