title: send data through onclick event from child to parent React js?
body: <p>I am new to React js I am pretty confused that how to send data through onclick event from child to parent component.</p>
  
  <p>Parent Component</p>
  
  <pre><code>...
        onTurn(id){
              console.log(id)//undefined
          }
          renderCardsList(){
                const {cardsList} = this.props
  
                return cardsList.get('cards').map(({id,front_image}) =&gt; {
                    return  &lt;Card
                              image={front_image}
                              onTurn={this.onTurn}
                              /&gt;
                })
  
              }
  ...
  </code></pre>
  
  <p>Child Component</p>
  
  <pre><code>const Card = (props) =&gt; {
      return(
          &lt;div className="singleCard"&gt;
              &lt;div className="imageDiv"&gt;
                  &lt;img src={props.image} alt="work" /&gt;
              &lt;/div&gt;
              &lt;div className="bottombar"&gt;
                  &lt;span onClick={e =&gt; props.onTurn(props.id)} className="glyphicon glyphicon-refresh" /&gt;
                  &lt;span className="glyphicon glyphicon-pencil" /&gt;
                  &lt;span className="glyphicon glyphicon-pushpin"  /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  };
  </code></pre>