0

Estoy intentando imprimir una lista de productos e incluir un boton para cada producto Utilice la funcion Map y le agrego a cada elemento la propiedad OnClick() pero no me reconoce las funciones de la clase.

Js

 remove=()=>{
        this.props.removerCarrito(this.props.item);
        console.log("remove");
      }
    return (
        <div className="modal">
    <div onClick={this.props.onClose} className="overlay"></div>
          <div className="modal-content">
           {this.props.pedido.map(function(item, i){
            return <p className="itemList"key={i}>{item} - <span onClick={this.remove}className="remove">Remover</span></p>
        })}

            {
                

            } 
      );
    }
    
  }
  export default Modal;
0

1 respuesta 1

1

Como estas usando function dentro del map, this no va a ser referencia a la clase.

Lo mas practico es usar fat arrow functions, asi:

{this.props.pedido.map((item, i) => 
    <p className="itemList"key={i}>{item} - <span onClick={this.remove}className="remove">Remover</span></p>)
}

Además, según me parece, vas a tener que ajustar como llamas a remove, ya que no va a hacer lo que quieres.

Tu onClick deberia lucir asi:

onClick={() => this.remove(item)}

y tu remove function:

remove = (item) => {
  this.props.removerCarrito(item);
}
2
  • Muchas gracias. Ahi lo probe y funciono todo Maestro! el 3 mar. 2022 a las 23:41
  • 1
    Excelente, me alegro!
    – yorch
    el 4 mar. 2022 a las 3:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.