Passing Onclick value to another component

Question

New to Javascript and React.. using it just to make UI for practice

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.

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.

class MainList extends React.Component {

  render() {
  return (
    <div>
  <ListArea listlinkarray={ListNameAndLinks}/>
  <Checkthekey/>

    </div>
  );

 }
}

is it okhay to pass the value to some component in function?

 class ListArea extends React.Component {

   onClick(keyd){
    console.log(keyd);

    <Checkthekey keydata={this.props.keyd}/>   // is this acceptable ?
}

  render() {

var rows = [];
 this.props.listlinkarray.forEach((linklist)=>{
    rows.push(<ListArray linklist={linklist} key={linklist.name} onClick={this.onClick.bind(this)}/>);
 });
    return (

      <div> 
     <h3> ListHead </h3>
      {rows}
      </div>
      </div>
    );
  }
}

class ListArray extends React.Component {
  getComponent(keyd) {
   this.props.onClick(keyd);
}
  render() {
 return (
  <div>

       <ul><li onClick={this.getComponent.bind(this,this.props.linklist.id)}>{this.props.linklist.name}</li></ul>
    </div>
    );
  }
}

want to pass the onclick value to this function so i can use it to change the view whenever user click on list items.

function Checkthekey(props) {
   var keydata= props.keydata

     if (keydata == 1) {
    return <UIone />;
  } else if (keydata ==2 )
  return <UItwo />;
   else return <UIone/>
  }

the array from which id comes

 var ListNameAndLinks= [
{ name:'ABC', id:1} ,
{ name:'BCD', id:2} 
 ];


  ReactDOM.render(<MainList/>, document.getElementById('container'));

Answer 1

Stick to JavaScript naming conventions and use camelCase for variables. I converted a few but you can do rest.

class MainList extends React.Component {
    constructor(props) {
        super(props);

        this.updateKey = this.updateKey.bind(this);
        this.state = {};
    }
    updateKey(keyData) {
        this.setState({ keyData: keyData });
    }
    render() {
      return (
        <div>
            <ListArea listLinkArray={ListNameAndLinks} updateKey={this.updateKey} />
            <Checkthekey keyData={this.state.keyData}/>
        </div>
      );
    }
}

Use map instead of forEach when looping through and rendering child items, it's easier and less code. Bind in the constructor instead of render when you can as it will be faster because it only binds it once instead of each render.

class ListArray extends React.Component {
    constructor(props) {
        super(props);

        this.onClick = this.onClick.bind(this);
    }
    onClick(keyData){
        this.props.updateKey(keyData);
    }
    render() {
        return (
          <div> 
            <h3> ListHead </h3>
            <ul>
                {this.props.listLinkArray.map(linklist => <ListItem linklist={linklist} key={linklist.name} onClick={this.onClick} />)}
            </ul>
            </div>
          </div>
        );
    }
}

Don't put divs inside ul, not valid html. Don't render the ul on each loop like you are doing, instead render the li on each loop.

class ListItem extends React.Component {
  render() {
    return <li onClick={this.props.onClick.bind(this, this.props.linklist.id)}>{this.props.linklist.name}</li>;
  }
}

Don't use switch statement, instead have the type of the name of the custom component on your array and pass this in to createElement

function Checkthekey(props) {
    var keydata= props.keydata

    return React.createElement(props.keyData);
}

 var ListNameAndLinks= [
    { name:'ABC', id: 'UIone'} ,
    { name:'BCD', id: 'UItwo'} 
     ];


ReactDOM.render(<MainList/>, document.getElementById('container'));