React : Pass function to child component

Question

I try to pass a function to my child component. For each child component when the user click on them, the onclick function will be call. This onclick function is written into the parent component.

Parent component:

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

  handleClick(e) {
    e.preventDefault();
    console.log(this.props);
  }

  render() {
    const { agents } = this.props;

    ...

    var agentsNodes = agents.map(function(agent, i) {
      if(agent.id_intervention == "") {
        return (
          <Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />
        );
      }
    });
    return (
      <div id="agents">
        <div className="agents-title">
          <h3>Title</h3>
        </div>
        {agentsNodes}
      </div>
    );
  }
}

Child component:

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

  render() {
    const { agent, t } = this.props;

    return (
      <Link to='/' onClick={this.props.onClick}>
        ...
      </Link>
    );
  }
}

At this line : <Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />

It say that handleClick is not defined ... How can I sovle this problem ?

Thank's for your answer.

score 33 · Accepted Answer · answered Jun 05 '16 at 00:27

33

You need to bind Agents to AgentsList: Here's a quick example with your code, I had to get rid of some stuff, but you get the idea:

http://jsfiddle.net/vhuumox0/19/

var agentsNodes = agents.map(function(agent, i) {
  if(agent.id_intervention == "") {
    return (
      <Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />
    );
  }
}, this); // here

answered Jun 05 '16 at 00:27

omarjmh

13,632
6
34
42

23

You may also use `onClick={() => this.handleClick()}`. – Downhillski Oct 28 '16 at 01:26
@ZhenyangHua actually this is a better approach so you don't need to use `bind` anymore. – Henrique Schreiner Apr 26 '17 at 19:58
1

what if there are like 8 functions – Muhammad Umer Jul 04 '17 at 17:31
then you pass each on in individually – omarjmh Jul 07 '17 at 21:54
@ZhenyangHua how do you pass event with that way (parameter)? – sensei Jun 09 '18 at 17:47
@AmelSalibasic `onClick={e => this.handleClick(e)}` – Downhillski Jun 11 '18 at 14:00
@Downhillski Wouldn't `onClick={() => this.handleClick()}` (arrow function) or using bind break the reference check mechanism of React since they always create new functions? – Galaxy Dec 13 '19 at 00:13

React : Pass function to child component

1 Answers1

Linked