Accessing props to mapped objects in render method

Question

I'm trying to create a dynamic list of views managed in a home component that can be saved and loaded. The save and load functions work fine but I get the following error when calling it in the span's returned from the map function in the Footer.js render method

Uncaught TypeError: Cannot read property 'props' of undefined

How can I access this function call in these elements?

Footer.js

export default class Footer extends React.Component {
constructor(props) {
    super(props);
}

render() {

    return (
        <div className="footer hbox">
            <div className="views hbox">

                <span onClick={ (e) => this.props.getViewNames() }>Get Views</span>
                <span onClick={ (e) => this.props.saveView('test3')}>Save View</span>
                <span onClick={(e) => this.props.loadView('test3')}>Load View</span>

                    {this.props.getViewNames().map(function(viewName){
                      return (
                        <span onClick={(e)=>this.props.loadView(viewName)}>
                        {viewName}
                      </span>
                      );
                    })}

        </div>
    );
 }
}

tl;dr: Use an arrow function. – Felix Kling Jan 24 '17 at 23:09 — Felix Kling, Jan 24 '17 at 23:09

score 0 · Accepted Answer · edited May 23 '17 at 11:45

0

You forgot to use an arrow function for getViewNames.map(), and thus the lexical scope of this is not kept in your code -- which is interesting, considering you did use the correct approach everywhere else.

So just do:

this.props.getViewNames().map(viewName => {
    ...
});

Also see:

How to access the correct `this` context inside a callback?

edited May 23 '17 at 11:45

Community

1
1

answered Jan 24 '17 at 23:17

John Weisz

30,137
13
89
132

score 0 · Answer 2 · answered Jan 25 '17 at 03:52

The reason you cannot access props inside the map function is because this inside your function refers to the context of the map function, and not React Component. You will need to bind your map function to the React Component context by using bind(this) on the map function or arrow functions

Using bind(this)

export default class Footer extends React.Component {
constructor(props) {
    super(props);
}

render() {

    return (
        <div className="footer hbox">
            <div className="views hbox">

                <span onClick={ (e) => this.props.getViewNames() }>Get Views</span>
                <span onClick={ (e) => this.props.saveView('test3')}>Save View</span>
                <span onClick={(e) => this.props.loadView('test3')}>Load View</span>

                    {this.props.getViewNames().map(function(viewName){
                      return (
                        <span onClick={(e)=>this.props.loadView(viewName)}>
                        {viewName}
                      </span>
                      );
                    }.bind(this))}

        </div>
    );
 }
}

using arrow function

export default class Footer extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {

        return (
            <div className="footer hbox">
                <div className="views hbox">

                    <span onClick={ (e) => this.props.getViewNames() }>Get Views</span>
                    <span onClick={ (e) => this.props.saveView('test3')}>Save View</span>
                    <span onClick={(e) => this.props.loadView('test3')}>Load View</span>

                        {this.props.getViewNames().map((viewName) => {
                          return (
                            <span onClick={(e)=>this.props.loadView(viewName)}>
                            {viewName}
                          </span>
                          );
                        })}

            </div>
        );
     }
    }

Accessing props to mapped objects in render method

2 Answers2