React.js: onClick function from child to parent

Question

I used this article as an example (React way), but it is not working for me. Please point me to my mistake, as I can't understand what's wrong.

This is the error I see:

Uncaught TypeError: this.props.onClick is not a function

Here is my code:

// PARENT
var SendDocModal = React.createClass({
  getInitialState: function() {
    return {tagList: []};
  },
  render: function() {
    return (
      <div>
        {
          this.state.tagList.map(function(item) {
            return (
              <TagItem nameProp={item.Name} idProp={item.Id} onClick={this.HandleRemove}/>
            )
          })
        }
      </div>
    )
  },
  HandleRemove: function(c) {
    console.log('On REMOVE = ', c);
  }
});

// CHILD
var TagItem = React.createClass({
  render: function() {
    return (
      <span className="react-tagsinput-tag">
        <span>{this.props.nameProp}</span>
        <a className='react-tagsinput-remove' onClick={this.HandleRemove}></a>
      </span>
    )
  },
  HandleRemove: function() {
    this.props.onClick(this);
  }
});

Thanks in advance!

Whoops! sorry.I always get an error: Uncaught TypeError: this.props.onClick is not a function — user2787338
– user2787338, Commented Jul 22, 2015 at 14:02

Community · Accepted Answer · 2017-05-23 11:46:04Z

11

The issue is that this inside the map callback does not refer to the React component, hence this.HandleRemove is undefined.

You can set the this value explicitly by passing a second argument to map:

this.state.tagList.map(function() {...}, this);

Now this inside the callback refers to the same value as this outside the callback, namely the SendDocModal instance.

This has nothing to do with React, it's just how JavaScript works. See How to access the correct `this` context inside a callback? for more info and other solutions.

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Jul 22, 2015 at 14:03

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

8 Comments

user2787338 Over a year ago

Hi, Felix. Thanks for your reply. Tried without for loop(just a component with hardcoded props) and it worked great. But I don't understand how to pass the context in my case. Could you please describe this in more detail?

Felix Kling Over a year ago

Sorry, simply confused forEach and map. It's the same solution. Have a look at the link in my answer to learn more about this.

user2787338 Over a year ago

If I understood right I should do something like this:

code {this.state.tagList.map(function(item){ 								return( 									<TagItem nameProp={item.Name} idProp={item.Id} contextProp={this} onClick={this.HandleRemove}/> 								) 							}, this)},

but in this case I get the same : Uncaught TypeError: this.props.contextProp.props.onClick is not a function

Felix Kling Over a year ago

No, just implement the solution in my answer. The body of the callback stays the same.

user2787338 Over a year ago

aha, now I got it. the correct code will be:

code {this.state.tagList.map(function(item){ 								return( 									<TagItem nameProp={item.Name} idProp={item.Id}  onClick={this.HandleRemove}/> 								) 							}, this)}

|

Community · Accepted Answer · 2017-05-23 11:53:40Z

1

Try the following:

    var SendDocModal = React.createClass({
        getInitialState: function() {

            var item = {};
            item.Name = 'First';
            item.Id = 123;

            var item2 = {};
            item2.Name = 'Second';
            item2.Id = 123456;
            return {tagList: [item,item2]};
        },

        HandleRemove: function(c){
            console.log('On REMOVE = ', c);
        },

        render: function() {
            return (<div>
                {this.state.tagList.map(function(item){
                    return(
                            <TagItem nameProp={item.Name} idProp={item.Id} key={item.Id} click={this.HandleRemove}/>
                    )}, this)}
                    </div>
            )       
        }

    });
    // CHILD
    var TagItem = React.createClass({

        handleClick: function(nameProp)
        {
            this.props.click(nameProp);
        },


        render: function(){
            return(
                <span className="react-tagsinput-tag" ><span onClick={this.handleClick.bind(this, this.props.nameProp)}>{this.props.nameProp}</span><a className='react-tagsinput-remove' ></a></span>
            )
        }
    });

Few changes:

Added 'this' after the tagList mapping. To be honest I am not entirely sure why - perhaps a more experienced programmer can tell us.

Added a key to each TagItem. This is recommended and an the console will inform you that you should do this so that if the state changes, React can track each item accordingly.

The click is passed through the props. See React js - having problems creating a todo list

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Jul 22, 2015 at 14:54

AndrewB

112 bronze badges

2 Comments

user2787338 Over a year ago

Yeah, the same as Felix advised. slightly more detailed. Thanks a lot, will try to understand "this" concept, looks so different from Java...

AndrewB Over a year ago

No problem. Check out this: github.com/getify/You-Dont-Know-JS/blob/master/…

Collectives™ on Stack Overflow

React.js: onClick function from child to parent

2 Answers 2

8 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related