Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

You must pass a component to the function returned by connect. Instead received undefined

Tags:

The code below gives

Uncaught Error: You must pass a component to the function returned by connect. Instead received undefined

List.js

import React from 'react'; import { connect, bindActionCreators } from 'react-redux'; import PostList from '../components/PostList'; // Component I wish to wrap with actions and state import postList from '../Actions/PostList' //Action Creator defined by me  const mapStateToProps = (state, ownProps) => {     return state.postsList }  const mapDispatchToProps = (dispatch) => {     return bindActionCreators({"postsList":postList},dispatch) }  export default connect(mapStateToProps, mapDispatchToProps)(PostList); 

PostList.js

import React from 'react'  export const PostList = (props) => {     return <div>List</div> } 

Please help me with a solution?

like image 656
Ram Kumar Parthiban Avatar asked Feb 19 '17 06:02

Ram Kumar Parthiban


People also ask

Can you pass a component to the function returned by connect?

You must pass a component to the function returned by connect. Instead received undefined Ask Question Asked3 years, 11 months ago Modified2 years, 5 months ago Viewed12k times

What is the return type of connect () function in react?

The return of connect () is a wrapper function that takes your component and returns a wrapper component with the additional props it injects. In most cases, the wrapper function will be called right away, without being saved in a temporary variable:

When will my component receive dispatch by default?

Your component will receive dispatch by default, i.e., when you do not supply a second parameter to connect (): If you define a mapDispatchToProps as a function, it will be called with a maximum of two parameters.

What is the second parameter to connect mapdispatchtoprops?

Conventionally called mapDispatchToProps, this second parameter to connect () may either be an object, a function, or not supplied. Your component will receive dispatch by default, i.e., when you do not supply a second parameter to connect (): If you define a mapDispatchToProps as a function, it will be called with a maximum of two parameters.


2 Answers

You are doing import PostList from '../components/PostList'; so you need to use export default in your PostList.js file.

Otherwise you need to do import { PostList } from '../components/PostList';.

To whoever is interested, here is a nice article about es6 import/export syntax: http://www.2ality.com/2014/09/es6-modules-final.html

like image 58
Canastro Avatar answered Sep 20 '22 07:09

Canastro


Not related to the asker specifically, but if you're facing this error, it's worth to check if you have the connect() syntax right:

const PreloadConnect = connect(mapStateToProps, {})(Preload);  export default PreloadConnect; 

Note that Preload, is passed as a IIFE parameter.

like image 35
Lucas Bustamante Avatar answered Sep 23 '22 07:09

Lucas Bustamante