Skip to main content
se añadieron 6 caracteres en el cuerpo
Origen Enlace

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.jsPedidos.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.jsCard.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;

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

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;

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;
Origen Enlace

Renderizar componente padre desde componente hijo

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

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;