Paulos3000 Paulos3000 - 1 year ago 121
Javascript Question

React-Redux's connect() method throwing TypeError

Working on the Dan Abramov's excellent tutorial for Redux, and on chap 27 - Generating containers with connect() - a strange bug is occurring:

First I define these two functions:

const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
type: 'TOGGLE_TODO',

Then I import the necessary dependency:

import { connect } from 'react-redux'

Then I create my component using the method exposed from react-redux, and pass in the two functions, finally connecting to my other component,

const VisibleTodoList = connect(mapStateToProps, mapDispatchToProps)(TodoList);

When I do this, it causes the browser to fail to render and the console returns:

TypeError: Cannot read property 'displayName' of undefined

I have never come across this error before, and it seems specific to the
method of

Has anyone come across this before, and/or know what could be causing it?


is defined above. If its
you want to see...

const TodoList = ( {todos, onTodoClick} ) => (
{ =>
<Todo key={}
onClick={() => onTodoClick(}

Answer Source

You're probably defining the TodoList component after your call to connect. Unlike the var keyword, the ES6 keywords like let, const, and class do not get hoisted to the top of the scope, and only exist starting at the line they're declared on. So, if you call connect() before you've defined TodoList, you're effectively running connect()(undefined). It's also possible that you might have an import statement that's not correct, which could also result in TodoList being undefined.

See for some further discussion.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download