title: Passing Onclick value to another component
body: <p>New to Javascript and React.. using it just to make UI for practice</p>
  
  <p>I cant seem to pass the OnClick value i get to another component even as child props.
  i am starting to feel like this is not a good approach.. can i be able to pass the value of onClick to Checkkey function and render it in MainList .... i m trying to pass the value of id to Checkkey in the OnClick function. </p>
  
  <p>My logic is that whenever user click on Sidebar list , the view on the other side in div should change to another component. the list will have its id which will compare with the component id or div id and change view accordingly, but for now i m just using condition in rendering if the id =1 show one component and if id=2 then show second component. but i cant pass the id from onOnclick to the conditional component.</p>
  
  <pre><code>class MainList extends React.Component {
  
    render() {
    return (
      &lt;div&gt;
    &lt;ListArea listlinkarray={ListNameAndLinks}/&gt;
    &lt;Checkthekey/&gt;
  
      &lt;/div&gt;
    );
  
   }
  }
  </code></pre>
  
  <p>is it okhay to pass the value to some component in function?</p>
  
  <pre><code> class ListArea extends React.Component {
  
     onClick(keyd){
      console.log(keyd);
  
      &lt;Checkthekey keydata={this.props.keyd}/&gt;   // is this acceptable ?
  }
  
    render() {
  
  var rows = [];
   this.props.listlinkarray.forEach((linklist)=&gt;{
      rows.push(&lt;ListArray linklist={linklist} key={linklist.name} onClick={this.onClick.bind(this)}/&gt;);
   });
      return (
  
        &lt;div&gt; 
       &lt;h3&gt; ListHead &lt;/h3&gt;
        {rows}
        &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  class ListArray extends React.Component {
    getComponent(keyd) {
     this.props.onClick(keyd);
  }
    render() {
   return (
    &lt;div&gt;
  
         &lt;ul&gt;&lt;li onClick={this.getComponent.bind(this,this.props.linklist.id)}&gt;{this.props.linklist.name}&lt;/li&gt;&lt;/ul&gt;
      &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>want to pass the onclick value to this function so i can use it to change the view whenever user click on list items.</p>
  
  <pre><code>function Checkthekey(props) {
     var keydata= props.keydata
  
       if (keydata == 1) {
      return &lt;UIone /&gt;;
    } else if (keydata ==2 )
    return &lt;UItwo /&gt;;
     else return &lt;UIone/&gt;
    }
  </code></pre>
  
  <p>the array from which id comes</p>
  
  <pre><code> var ListNameAndLinks= [
  { name:'ABC', id:1} ,
  { name:'BCD', id:2} 
   ];
  
  
    ReactDOM.render(&lt;MainList/&gt;, document.getElementById('container'));
  </code></pre>