Javascript map method doesn't work in reactjs project - reactjs

Question

I am completely new at react and I am following a tutorial. For this tutorial I have the following component called user-list.js:
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
class UserList extends Component {
createListItems() {
return this.props.users.map((user) => {
return (
<li>{user.first}</li>
);
});
}
render() {
return (
<ul>
{this.createListItems()}
</ul>
);
}
}
function mapStateToProps(state) {
return {
users: state.users
};
}
export default connect(mapStateToProps)(UserList);
And here is my reducer-users.js
export default function() {
return [
{
id: 1,
first: 'Bucky',
last: 'Roberts',
age: 71,
description: 'Bucky is a React developer anbd Youtuber',
thumbnail: 'http://i.imgur.com/7yUvePI.jpg'
},
{
id: 2,
first: 'Joby',
last: 'Wasilenko',
age: 27,
description: 'Joby loves the Packers, cheese and turtles',
thumbnail: 'http://i.imgur.com/52xRlm8.jpg'
},
{
id: 3,
first: 'Madison',
last: 'Williams',
age: 24,
description: 'Madi likes her dog but it is really annoying.',
thumbnail: 'http://i.imgur.com/4EMtxHB.jpg'
}
]
}
And now I am getting an error in the console:
Uncaught TypeError: Cannot read property 'map' of undefined
I don't understand what I am doing wrong, I removed the map function and returned any other data and it works fine, except when it tries to map the data.

Answer 1

When using the ES6 syntax for React Components, in your constructor function you need to bind any custom bethods you define on your class.
add the following to your UserList definition
constructor(props) {
super(props);
this.createListItems = this.createListItems.bind(this);
}
and you should be good to go. If you don't like doing this, you can also revert to the React.createClass({}) method for creating your component class.

Answer 2

you should have something like this for your code to work correctly.
// user reducer file
const initialState = [
{
id: 1,
first: 'Bucky',
last: 'Roberts',
age: 71,
description: 'Bucky is a React developer anbd Youtuber',
thumbnail: 'http://i.imgur.com/7yUvePI.jpg'
},
{
id: 2,
first: 'Joby',
last: 'Wasilenko',
age: 27,
description: 'Joby loves the Packers, cheese and turtles',
thumbnail: 'http://i.imgur.com/52xRlm8.jpg'
},
{
id: 3,
first: 'Madison',
last: 'Williams',
age: 24,
description: 'Madi likes her dog but it is really annoying.',
thumbnail: 'http://i.imgur.com/4EMtxHB.jpg'
}
];
export default function usersReducer(state, action) {
return state;
}
// root reducer file
import { combineReducers } from 'redux';
import usersReducer from 'your path to users reducer file'
export default function rootReducer() {
return combineReducers({
users: usersReducer,
});
}
// store file
import { createStore } from 'redux';
import rootReducer from 'path to root reducer file';
const store = createStore(rootReducer());
export default store;