Passing arguments from a child component

Question

I am trying to pass an argument from a child component to a parent. Postscript The snippet below does not work, if someone fixes it, that would be great.

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={() => click()} />
);

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



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

<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>
<div id="app"></div>

Run code

Answer 1

• Do not use div to trigger clicks. The correct way to use the button, eg
• OnClick right handler don't just click

class Parent extends React.Component {

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

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


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

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



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

<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>
<div id="app"></div>

Run code

Answer 2

This is because you are not passing the value from the ChildComponent to the 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 to replace the click with the onClick button inside the SubChildComponent.

Work 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>

Run code

Answer 3

ChildComponent click SubChildComponent:

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

Answer 4

You can also use the es6 arrow function in your parent component, so there is no need to explicitly associate this with this function.

However, when we call this function from the child with the id that should be passed to it, we bind this to pass the id value. Below is a 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')
);