title: ReactJS map onClick get value
body: <p>Im new to React, and im creating an app that will fetch the values with an onClick event, I figured that I'd do something liket this:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Ingredients extends Component {
  // Functions
  clickIngredient() {
  let val = this.refs.itemValue.value;
  console.log(val);
  }
  render() {
    // Print out all ingredients through mapping
    // First create var from props
    const ingredients = this.props.data;
    // Now map through it
    const ingredientList = ingredients.map((item, i) =&gt; {
    // Return listitem
    return (
      &lt;li key={i} ref="itemValue" value={item} onClick={this.clickIngredient.bind(this)}&gt;{item}&lt;/li&gt;
    );
  });
  // Final view
  return (
    &lt;div className="ingredients"&gt;
      &lt;ul className="ingredient-list"&gt;
        {ingredientList}
      &lt;/ul&gt;
    &lt;/div&gt;
    )
   }
  }
  
  export default Ingredients;
  </code></pre>
  
  <p>But I do not get the value, what am I doing wrong?</p>