title: React - change this.state onClick rendered with array.map()
body: <p>I'm new to React and JavaScript.</p>
  <p>I have a Menu component which renders an animation <code>onClick</code> and then redirects the app to another route, <code>/coffee</code>.</p>
  <p>I would like to pass the value which was clicked (selected) to function <code>this.gotoCoffee</code> and update <code>this.state.select</code>, but I don't know how, since I am mapping all items in <code>this.state.coffees</code> in the same <code>onClick</code> event.</p>
  <p>How do I do this and update <code>this.state.select</code> to the clicked value?</p>
  <p>My code:</p>
  <pre><code>class Menus extends Component{
    constructor (props) {
      super(props);
      this.state = { 
          coffees:[],
          select: '',      
          isLoading: false,
          redirect: false
      };
    };
    gotoCoffee = () =&gt; {
      this.setState({isLoading:true})
      setTimeout(()=&gt;{
        this.setState({isLoading:false,redirect:true})
      },5000)
    }
  
    renderCoffee = () =&gt; {
      if (this.state.redirect) {
        return (&lt;Redirect to={`/coffee/${this.state.select}`} /&gt;)
      }
    }
  
    render(){
      const data = this.state.coffees;
  
      return (
        &lt;div&gt;
          &lt;h1 className=&quot;title is-1&quot;&gt;&lt;font color=&quot;#C86428&quot;&gt;Menu&lt;/font&gt;&lt;/h1&gt;
          &lt;hr/&gt;&lt;br/&gt;
          {data.map(c =&gt; 
            &lt;span key={c}&gt;
              &lt;div&gt;
                 {this.state.isLoading &amp;&amp; &lt;Brewing /&gt;}
                 {this.renderCoffee()}
                &lt;div onClick={() =&gt; this.gotoCoffee()} 
                    &lt;strong&gt;&lt;font color=&quot;#C86428&quot;&gt;{c}&lt;/font&gt;&lt;/strong&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/span&gt;)
          }
        &lt;/div&gt;
      );
    }
  }
  
  export default withRouter(Menus);
  </code></pre>
  <hr />
  <p>I have tried passing the value like so:</p>
  <pre><code>  gotoCoffee = (e) =&gt; {
      this.setState({isLoading:true,select:e})
      setTimeout(()=&gt;{
        this.setState({isLoading:false,redirect:true})
      },5000) 
      console.log(this.state.select)
    }
  </code></pre>
  <p>an like so:</p>
  <pre><code>&lt;div onClick={(c) =&gt; this.gotoCoffee(c)} 
  </code></pre>
  <p>or so:</p>
  <pre><code>&lt;div onClick={(event =&gt; this.gotoCoffee(event.target.value} 
  </code></pre>
  <p>but <code>console.log(this.state.select)</code> shows me '<code>undefined</code>' for both tries.</p>
  <p>It appears that I'm passing the <code>Class</code> with 'c'.</p>
  <p>browser shows me precisely that on the uri at redirect:</p>
  <p><code>http://localhost/coffee/[object%20Object]</code></p>
  <hr />
  <p>Now if I pass mapped 'c' to <code>{this.renderCoffee(c)}</code>, which not an <code>onClick</code> event, I manage to pass the array items.</p>
  <p>But I need to pass not the object, but the clicked value 'c' to <code>this.gotoCoffee(c)</code>, and THEN update <code>this.state.select</code>.</p>
  <p>How do I fix this?</p>