How can I get the content of the item from a list in react?

Hi, I'm trying to capture the contents of a list with an onClick in react.js and I do not get good results and I would like someone to help me by explaining why I do not recognize the onClick event and how to get the content out of the list to save later in an array. I am presenting the following problem:

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 |        )

Next the code:

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;