Passing arguments from child component React

This is because you are not passing the value from ChildComponent to parent component, here:

<SubChildComponent id="1" click={() => click()} />

Use this:

<SubChildComponent id="1" click={(id) => click(id)} />

Or Simply:

<SubChildComponent id="1" click={click} />

Another change is replace click with onClick inside SubChildComponent.

Working Code:

class Parent extends React.Component {

  suggestionClick(id) {
    console.log(this.props, id); // {props Object} , undefined
  }

  render(){
    return (
      <ChildComponent click={this.suggestionClick.bind(this)} />
    );
  }
}


const ChildComponent = ({ click }) => (
  <SubChildComponent id="1" click={(id) => click(id)} />
);

const SubChildComponent = ({ click, id }) => (
  <div className="subsubcomponent" onClick={() => click(id)}>Click</div>
);



ReactDOM.render(
  <Parent />,
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

In ChildComponent, just pass the click property directly to the SubChildComponent:

const ChildComponent = ({ click }) => (
  <SubChildComponent id="1" click={click} />
);

You can also use es6 arrow function in your parent component, therefore no need to bind this to this function explicitly.

However when we call this function from child along with id to be passed to it, we bind this for passing the id value. Below is the modified code for reference. Hope this helps.

class Parent extends React.Component {

  // make this function as arrow function
  suggestionClick = (id) => {
    console.log(this.props, id); // {props Object} , id
  }

  render(){
    return (
      <ChildComponent click={this.suggestionClick} />
    );
  }
}


const ChildComponent = (props) => (
  <SubChildComponent id="1" click={props.click} />
);

const SubChildComponent = (props) => (
  <div className="subsubcomponent" onClick={props.click.bind(this, props.id)} />
);



ReactDOM.render(
  <Parent />,
  document.getElementById('app')
);