Error in App class when using React-Redux "connect "

Question

I am receiving the following error when trying to use the connect() function from react-redux:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `App`.

This is App:

import { Provider } from 'react-redux';
import configureStore from './store';
const App = class extends React.PureComponent {
  render() {
    const { title } = this.context;
    return (
      <div className="center-screen">
        {title}
        <Provider store={configureStore()}>
          <Chat />
        </Provider>
      </div>
    );
  }
};

This is the relevent code end of chat:

import { connect } from 'react-redux';


  ...


    const mapStateToProps = state => ({
  ...state
});
const mapDispatchToProps = dispatch => ({
  addMessage: () => dispatch(addMessage)
});

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

When using : "export default Chat" instead of connect, it's working fine..

Chris B. · Accepted Answer · 2019-04-28 22:28:44Z

2

Try this:

const ConnectedChat = connect(
  mapStateToProps,
  mapDispatchToProps
)(Chat);

export default ConnectedChat;

Or you may wish to rename the class definition to ConnectedChat and reverse the names so you can import it as just Chat.

Edit: Also make sure you're importing the Chat component in the App file, as well as the addMessage action creator if you're not.

answered Apr 28, 2019 at 22:28

Chris B.

5,7711 gold badge17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ben Zoker Over a year ago

I am still getting the same error. I used the same code you posted and now app.js uses ConnectedChat instead of Chat

Chris B. Over a year ago

Hmm. Can you post the full Chat component?

Ben Zoker Over a year ago

I added Chat and App in here (this is a cut down version and it does nothing, but it still doesn't work here.So whatever the problem with my full component is (that I can't fully disclose unfortunately),it's still alive in this version):codesandbox.io/s/lp9k07ro3m

Chris B. Over a year ago

Something is not being imported or exported properly, it's hard to tell without the entire source tree. At a glance the statements all appear to follow proper syntax, I would double check all the routes and make sure that the capitalization and paths line up (for example, importing from "./Chat" will throw an error if the file is named "chat.js"). You may have just named it that on the sandbox for convenience, but I'd go over everything just to be sure. I was able to get the sandbox working by renaming those and removing unused references.

MxOliver · Accepted Answer · 2019-04-29 23:04:47Z

0

Where are you defining Chat the component in your connect function?

My usual set up is (I'm using class but const ConnectedChart() would still be this same set up)

class ConnectedChart extends Component {

//// All code here render and return etc

}

const Chart = connect (mapStateToProps)(ConnectedChat);

export default Chart;

So that way you are essentially assigning a component to Chart with the connect statement and then you export default. I think exporting the connect statement directly might by throwing an error but if that doesn't work post the full chart component and I'll see if there is something else going on

EDIT: based on the full code

try this in your App.js:

import React from "react";
import ReactDOM from 'react-dom';
import "./App.css";
import ConnectedChat from "./Chat";
import { Provider } from "react-redux";
import configureStore from "./store";

ReactDOM.render(
        <Provider store={configureStore()}>
          <ConnectedChat />
        </Provider>
    );

and then put your div center screen in ConnectedChat

(if you are going to be adding more components later and want that div wrapping all of them, create a main app component like landing or something and call that between your provider instead of chat, and then in that landing component render the div and your ChatComponent)

Also if you don't have an index.js change the 'main' in your package.json to this App.js component

edited Apr 29, 2019 at 23:04

answered Apr 28, 2019 at 22:35

MxOliver

381 silver badge10 bronze badges

5 Comments

Ben Zoker Over a year ago

I added Chat and App in here (this is a cut down version and it does nothing, but it still doesn't work here.So whatever the problem with my full component is (that I can't fully disclose unfortunately),it's still alive in this version):codesandbox.io/s/lp9k07ro3m

MxOliver Over a year ago

Do you have an index.js in your src directory, or is App.js your base file that is rendering everything else? If App is your base file, I think the problem is how you are rendering it.

MxOliver Over a year ago

I added some stuff above with new suggestions

Ben Zoker Over a year ago

Where should I put the "ReactDOM.render" ? in the return method of App ?. And yes there is an index.js file that uses App.js

MxOliver Over a year ago

React DOM.render should go in your index or whatever your most root file is, because it can only have one child component and that child component (usually called App.js) is the parent of all other components in your application. So what I wrote above with the configure store and reactDOM.render that should all be in that root react file whatever it's called (usually index)

Collectives™ on Stack Overflow

Error in App class when using React-Redux "connect "

2 Answers 2

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related