Hello, I'm trying to capture on the onClick the object that maps to me from the array of objects but I can not find the way to handle the events the object never returns to me. I put two console.log () to see what I'm getting, the one inside the element li shows me that if the object arrives and the one inside the function handleClick tells me that an object object arrives, I do not know why it returns the content of the object. I would like someone to help me define why this happens.
Next I put the code to see if they suggest me with this.
--- Component List of Products
import React, { Component } from 'react';
const uuidv4 = require('uuid');
class ListadoDeProductos extends Component{
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e){
console.log(e.target.value);
// let producto = e.target.getAttribute('value');
// this.props.addOrden(producto);
}
render(){
var productos = this.props.productos;
const ListaProductos = productos.map(function(Producto){
return (
<li className="item-list" key={uuidv4()} onClick={this.handleClick}
value={Producto}>{console.log(Producto)}<i>Código</i>:{Producto.codigo}
<i>Nombre</i>: {Producto.nombre}, <i>Precio</i>: {Producto.precio}</li>
)
},this);
return(
<div className="col-md-5" >
<h3>{this.props.titulo}</h3>
<div key={uuidv4()}>
<ul>
{ListaProductos}
</ul>
</div>
</div>
);
}
}
export default ListadoDeProductos;
Output of the logs:
