CODEWITHSUNDEEP
redux
Iggy
Iggy

Reputation: 5251

Cannot display todos in react-redux (property map undefined)?

I am trying to learn Redux by creating my own todo app without the flairs in Redux' official todo app example. I am having trouble displaying my todos list as I am getting TypeError: Cannot read property 'map' of undefined.

The repo can be found here. It is fairly lightweight (less components than Redux' todo-app).

This is the part that I have trouble with:

/src/components/TodoList.js

import React from 'react';

const TodoList = ({todos}) => {
  return (
    <ul>
      {todos.map(todo =>
        <li key={todo.id}>{todo.text}</li>
      )}
    </ul>
  )
}

export default TodoList;

I also use connect on my ViewTodoList.js containers. If I understand it correctly, by doing this I should populate my todos with the store states:

/containers/ViewTodoList.js

import React from 'react';
import {connect} from 'react-redux';
import TodoList from '../components/TodoList';

const mapStateToProps = (state) => {
  todos: state.todos
}

const ViewTodoList = connect(
  mapStateToProps
)(TodoList)

export default ViewTodoList;

I am pretty sure my Redux store has the correct state. The AddTodo can be found here.

However, for some reason TodoList component inside components/TodoList.js is not receiving the todos states inside as {todos}. I think I might have made some mistake here.

How can I properly display all todos state inside TodoList?

Upvotes: 1

Views: 88

Answers (1)

Tomek Rychtyk
Tomek Rychtyk

Reputation: 136

You forgot to return the value in your mapStateToProps. It should be:

const mapStateToProps = state => ({
  todos: state.todos,
});

Upvotes: 2

Related Questions