Handling event on array item won't work - ReactJS

Question

I try to map an array and put click event on the array items. I know it's a bit different because of how JavaScript handles functions but I can't make it work. I get the error: Cannot read property 'saveInStorage' of undefined. Can anyone tell me what I'm doing wrong? Thanks in advance! Here is my code:

import React from "react";

const data = require('../data.json');

export default class Gebruikers extends React.Component {

    constructor() {
        super();
        this.state = {
            users: data.users
        };
        this.saveInStorage = this.saveInStorage.bind(this)
    }

    saveInStorage(e){
        console.log("test");
    }

    renderUser(user, i) {
        return(
            <p key={i} onClick={this.saveInStorage(user)}>f</p>
        );  
    }

    render() {
        return (
            <div>
                {
                    this.state.users.map(this.renderUser)
                }
            </div>
        );
    }
}

kpwahn · Accepted Answer · 2018-01-08 15:08:23Z

2

this is undefined in renderUser() You need to bind this for renderUser() in your constructor. Also, you are calling saveInStorage() every time the component is rendered, not just onClick, so you'll need to use an arrow function in renderUser

import React from "react";

const data = require('../data.json');

export default class Gebruikers extends React.Component {

  constructor() {
    super();
    this.state = {
        users: data.users
    };
    this.saveInStorage = this.saveInStorage.bind(this);
    this.renderUser = this.renderUser.bind(this);
  }

  saveInStorage(e){
    console.log("test");
  }

  renderUser(user, i) {
    return(
        <p key={i} onClick={() => this.saveInStorage(user)}>
    );  
  }

  render() {
    return (
        <div>
            {
                this.state.users.map(this.renderUser)
            }
        </div>
    );
  }
}

Instead of binding you can also use an arrow function (per mersocarlin's answer). The only reason an arrow function will also work is because "An arrow function does not have its own this; the this value of the enclosing execution context is used" (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). The enclosing execution in your case is your render, where this is defined.

edited Jan 8, 2018 at 15:08

answered Jan 8, 2018 at 14:55

kpwahn

3,0121 gold badge15 silver badges29 bronze badges

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

1 Comment

Paul Fitzgerald Over a year ago

This doesn't work either. this.saveInStorage(user) gets invoked when the component is rendered.

Paul Fitzgerald · Accepted Answer · 2018-01-08 15:08:55Z

1

You need to make two changes to your code which are outlined below.

You are invoking the function when the component is rendered. To fix this update this line to the following
```
<p key={i} onClick={() => this.saveInStorage(user)}>
```

This means that the function will only be invoked when you click on the item.

You also need to bind the renderUser in your constructor or else use an arrow function.
```
this.renderUser = this.renderUser.bind(this);
```

See working example here.

edited Jan 8, 2018 at 15:08

answered Jan 8, 2018 at 14:57

Paul Fitzgerald

12.1k4 gold badges45 silver badges57 bronze badges

Comments

Hemerson Carlin · Accepted Answer · 2018-01-08 15:27:49Z

1

Your onClick event handler is wrong. Simply change it to:

onClick={() => this.saveInStorage(user)}

Don't forget to also bind renderUser in your constructor. Alternatively, you can choose arrow function approach as they work the same as with bind:

class Gebruikers extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = {
      users: [{ id: 1, name: 'user1' }, { id: 2, name: 'user2' }],
    }
  }

  saveInStorage = (e) => {
    alert("test")
  }

  renderUser = (user, i) => {
    return(
      <p key={i} onClick={() => this.saveInStorage(user)}>
        {user.name}
      </p>
    )  
  }

  render() {
    return (
      <div>{this.state.users.map(this.renderUser)}</div>
    );
  }
}

ReactDOM.render(
  <Gebruikers />,
  document.getElementById('root')
)

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

edited Jan 8, 2018 at 15:27

answered Jan 8, 2018 at 14:55

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

4 Comments

Hemerson Carlin Over a year ago

@PaulFitzgerald What are you asking about? The arrow function approach?

Paul Fitzgerald Over a year ago

Yes, you also need to bind renderUser in the constructor, or else use an arrow function for renderUser. You have only covered saveInStorage in your answer

Hemerson Carlin Over a year ago

@PaulFitzgerald about the arrow function approach you can check in React's docs

Paul Fitzgerald Over a year ago

i know what the arrow function is and how it works. I was pointing out that your answer was not correct. Neither of the two answers that had been upvoted here actually worked.

Johannes Klauß · Accepted Answer · 2018-01-09 14:13:04Z

1

Paul Fitzgeralds answer is the correct one, although I'd like to propose a different way of handling this, without all the binding issues.

import React from "react";

const data = require('../data.json');

export default class Gebruikers extends React.Component {

    constructor() {
        super();
        this.state = {
            users: data.users
        };
    }

    saveInStorage = (e) => {
        console.log("test");
    };

    render() {
        return (
            <div>
                {this.state.users.map((user, i) => {
                    return (<p key={i} onClick={() => this.saveInStorage(user)}>f</p>);
                })}
            </div>
        );
    }
}

With saveInStorage = (e) => {}; you are binding the saveInStorage function to the this context of your class. When invoking saveInStorage you'll always have the (at least I guess so in this case) desired this context.

The renderUser function is basically redundant. If you return one line of JSX, you can easily do this inside your render function. I think it improves readability, since all your JSX is in one function.

edited Jan 9, 2018 at 14:13

answered Jan 8, 2018 at 15:23

Johannes Klauß

11.1k18 gold badges73 silver badges128 bronze badges

4 Comments

Demi Over a year ago

This sounds good but I get an error, unexpected token. I can't figure out how to fix it. But it says that one of the closing parentheses after the closing </p> unnecessary is.

Johannes Klauß Over a year ago

Well, how about removing one? You're right there is a syntax error. Corrected the answer.

Demi Over a year ago

Yes but then I get: Unterminated regular expression on the closing div tag. I have no idea why that happens.

Johannes Klauß Over a year ago

Oh, I am very sorry. I got confused with the closing brackets and parantheses. Updated the answer.

Rodius · Accepted Answer · 2018-01-08 14:57:01Z

0

You are not sending the parameters to this.renderUser

this.state.users.map((user, i) => this.renderUser(user, i))

Also your onClick function should be slightly changed. Here's the full code changed:

import React from "react";

const data = require('../data.json');

export default class Gebruikers extends React.Component {

    constructor() {
        super();
        this.state = {
            users: data.users
        };
        this.saveInStorage = this.saveInStorage.bind(this)
    }

    saveInStorage(e){
        console.log("test");
    }

    renderUser(user, i) {
        return(
            <p key={i} onClick={() => this.saveInStorage(user)}>f</p>
        );  
    }

    render() {
        return (
            <div>
                {
                    this.state.users.map((user, i) => this.renderUser(user, i))
                }
            </div>
        );
    }
}

answered Jan 8, 2018 at 14:57

Rodius

2,32117 silver badges20 bronze badges

1 Comment

Johannes Klauß Over a year ago

this.state.users.map((user, i) => this.renderUser(user, i)) This line is redundant. this.state.users.map(this.renderUser) is already sufficient enough, since this.renderUser is just the callback function that is getting invoked by the .map function. You could argue that the content of renderUser could be inline in the render function, though.

Collectives™ on Stack Overflow

Handling event on array item won't work - ReactJS

5 Answers 5

1 Comment

Comments

4 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

4 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related