'props' of undefined inside map closure

Question

I get TypeError: Cannot read property 'props' of undefined. I need to my Li component to receive props. I'm using styled-component by the way.

const Li = styled.li`
  border-top: 0 none;
`;

class Popular extends Component {
    render() {
        var languages = ['All', 'Javascript', 'Java', 'Python'];
        return (
            <ul className='list-group'>
                {languages.map(function(lang){
                    return (
                        <Li className={`list-group-item p-2 ${this.props.className}`}>
                            {lang}
                        </Li>
                    )
                })}
            </ul>
        );
    }
}

export default Popular;

I think your problem might be that `languages.map(function(lang)` should be `languages.map((lang) => )`... — Ahmed Hawas, Nov 17 '17 at 19:15

Prakash Sharma · Accepted Answer · 2017-11-18T05:03:07.473

3

You need to bind the callback of languages.map to the popular class. You can either use arrow function like this

{languages.map((lang) => {

or just pass this as the second argument of map function like this

{languages.map(function(lang){
       ...
}, this)}

or you can bind it using bind function like this

{languages.map((function(lang){
       ...
}).bind(this))}

edited Nov 18 '17 at 05:03

answered Nov 17 '17 at 19:14

Prakash Sharma

15,542
6
30
37

2

There is no need to call `.bind`, you can just pass `this` as second argument to `.map`: `languages.map(function(lang){...}, this);`. – Felix Kling Nov 17 '17 at 20:05
@FelixKling Yeah, i forgot that. Updated. Thanx – Prakash Sharma Nov 18 '17 at 05:04

'props' of undefined inside map closure

1 Answers1