React function not recognized

Question

In my react app, I have an onClick function that isn't being recognized (TypeError: _this2.click is not a function) when called from dynamically-generated components. I poked around for issues with functions not being bound correctly, but they seem to be. Here's the code:

class C extends React.Component {

  constructor(props) {
    super(props);


    // Bind components
    this.eventComponent = this.eventComponent.bind(this);
    this.click = this.click(this);
  }

  /**
   * Click function for when a user selects their choice
   * @param  {[int]} id [id of the event the user is selecting]
   */
  click(id) {
    console.log(id)
  }

  /**
   * Draws an event component (dynamically generated)
   * @param  {[String]} name    [name of the event]
   * @param  {[String]} summary [summary of event]
   * @return {[Object]}         [react element of an event]
   */
  eventComponent(name, summary, id) {
    if (name != null && summary != null) {
      return (
        <div >
          <h1>{name}</h1>
          <p>{summary}</p>
          <button onClick={() => this.click(id)}>Here is a button!</button>
        </div>
        );
    }

  }


  render() {

    var event = this.state.event

    var objArray = this.state.objArray

    var eventMap;

    if (event) {
      eventMap = objArray.map(function(event) {
        // Get first property
        var firstProp;
        var k;
        for(var key in event) {
            if(event.hasOwnProperty(key)) {
                firstProp = event[key];
                k = key;
                break;
            }
        }
        return this.eventComponent(firstProp.title, firstProp.summary, k);
      }.bind(this))
    } else {
      eventMap = <p>No events found!</p>;
    }

    // Generate a default HTML object
    var eventComponent = (
      <div>
          {eventMap}
      </div>
    );

    return eventComponent;
  }

}

It should be this.click.bind(this);

Arup Rakshit
– Arup Rakshit

2018-12-25 17:58:30 +00:00
Commented Dec 25, 2018 at 17:58 — Arup Rakshit
– Arup Rakshit, Commented Dec 25, 2018 at 17:58

Vikas Singh · Accepted Answer · 2018-12-25 18:01:05Z

5

in your constructor correct this this.click = this.click(this); to this.click = this.click.bind(this);

answered Dec 25, 2018 at 18:01

Vikas Singh

1,8651 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tarreq · Accepted Answer · 2018-12-25 18:40:51Z

1

The most easy and convenient way is to use arrow functions, so you don't need to do binding in constructor anymore, a lot easier, isn't it?

so just remove this from constructor:

this.click = this.click.bind(this);

and change your function to:

click = (id) => {
    console.log(id)
  }

answered Dec 25, 2018 at 18:40

Tarreq

1,3551 gold badge10 silver badges18 bronze badges

Comments

Sahil Arora · Accepted Answer · 2018-12-26 08:53:26Z

1

As answered by Vikas, either you can follow that approach or you can use arrow syntax for functions using which there will be no need to bind functions. Eg. Click = (Id) => {

} .

edited Dec 26, 2018 at 8:53

answered Dec 25, 2018 at 18:27

Sahil Arora

4913 silver badges10 bronze badges

Collectives™ on Stack Overflow

React function not recognized

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related