mapStateToProps() in connect() must return a plain object, Instead received Undefined

Question

I have implemented redux to complete a TODO application.

My Todo code

 import { connect } from "react-redux";

import TodoList from "../components/TodoList.js";

// Here we will connect 

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

const mapDispatchToProps = dispatch => {
    toggleTodo: id => dispatch({ type: 'TOGGLE_TODOS', id })


}


export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

// Reducer

 const todos = (state = [], action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return [
                ...state, {
                    id: action.id,
                    text: action.text,
                    visibility: false
                }
            ]
        case 'TOGGLE-TODO':
            return state.map(todo => (todo.id === action.id)
                ?
                { ...todo, completed: !todo.completed }
                : todo)
        default:
            return state;
    }

}

export default todos;

Im getting an error at the end as 'mapStateToProps must receive a plain object, Instead received Undefined'.

please let me know how to resolve this.

Answer 1

You need to return the object, you can do it like so, see the brackets around the object.

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

You could also do

const mapStateToProps = state => { 
    return { todos: state.todos }; 
};

Both return an object.

Answer 2

You have a syntax mistake. You should enclose your code in parenthesis.

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

This is in short:

const mapStateToProps = state => ( { } ) // This returns an empty object