0

Hola estoy tratando de capturar el contenido del item de una una lista con un onClick en react.js y no logro buenos resultados y quisiera alguien me ayude explicando porque no reconoce el evento onClick y como sacar el contenido de la lista para guardar posteriormente en un array. Estoy presentando es siguiente problema:

TypeError: Cannot read property 'handleClick' of undefined
 (anonymous function)
 D:/Programacion/proyects/react-test/sales- 
 point/src/components/ListadoDeProductos.js:16
 13 | var productos = this.props.productos; 
 14 | const ListaProductos =    productos.map(function(nombreProducto){
 15 |       return (
 > 16 |         <li  onClick={this.handleClick} key={uuidv4()}> 
{nombreProducto}</li>
17 |       )
18 |      });
19 |    
View compiled
ListadoDeProductos.render
D:/Programacion/proyects/react-test/sales- 
point/src/components/ListadoDeProductos.js:14
11 | }
12 | render(){
13 |    var productos = this.props.productos; 
> 14 |  const ListaProductos =  productos.map(function(nombreProducto){
15 |        return (
16 |          <li  onClick={this.handleClick} key={uuidv4()}> 
{nombreProducto}</li>
17 |        )

A continuación el código:

class ListadoDeProductos extends Component{
constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
}
handleClick(){
console.log("click en la lista");
}
render(){
var productos = this.props.productos; 
const ListaProductos =  productos.map(function(nombreProducto){
    return (
      <li  onClick={this.handleClick} key={uuidv4()}>{nombreProducto}</li>
    )
   });

return(
    <div className="col-md-4" >
        <h3>{this.props.titulo}</h3>
        <div key={uuidv4()}>
        <ul>
        {ListaProductos}
        </ul>

        </div>
    </div>

    );
  }
  }
  export default ListadoDeProductos;

1 respuesta 1

1

Hola problema resuelto!!! Agregue this al final de la funcion que ingreso en el map y ya no me da error.

const ListaProductos =  productos.map(function(nombreProducto){
return (
  <li  onClick={this.handleClick} key={uuidv4()}>{nombreProducto}</li>
)
}, this);
   ----

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.