connect() returns an object
See original GitHub issueI’m using these libraries:
react: 16.8.6
redux: 4.0.1
react-redux: 7.0.3
I have a simple component (Typescript):
class ExampleComponent extends React.PureComponent<IProps, {}> {
constructor(props: any) {
super(props);
}
public render() {
return (
<div>
{this.props.name}
</div>
);
}
}
interface IProps{
name: string;
}
const mapStateToProps = (state) => {
return {
name: state.name
};
}
export default connect(mapStateToProps)(ExampleComponent);
And I have a parent component:
import ExampleComponent from './ExampleComponent';
export default class App extends React.PureComponent<{}, {}> {
constructor(props: any) {
super(props);
}
public render() {
return (
<div>
<ExampleComponent />
</div>
);
}
}
For some reason the connect(mapStateToProps)(ExampleComponent)
returns an object
instead of React component.
I am getting an error:
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
Also when I trying to do console.info(typeof connect(mapStateToProps)(ExampleComponent))
it prints object
to the console.
How can I solve this issue?
Issue Analytics
- State:
- Created 4 years ago
- Reactions:3
- Comments:9 (3 by maintainers)
Top Results From Across the Web
reactjs - Connect returns an object, but how do I get it to return ...
connect is a HOC which expects a component to inject props as second argument but VerifyEmailResend isn't a React component.
Read more >Connect | React Redux
The connect() function connects a React component to a Redux store. ... Your mapStateToProps functions are expected to return an object.
Read more >Connection Object (ADO) - Microsoft Learn
A Connection object represents a unique session with a data source. In a client/server database system, it may be equivalent to an actual ......
Read more >Object — Godot Engine (stable) documentation in English
You can construct Objects from scripting languages, using Object.new() in GDScript, ... Returns the object's property list as an Array of dictionaries.
Read more >React Redux connect(): When and how to use it
Since a higher order component is returned by connect() , it has to be ... If a plain object is returned from mapStateToProps...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hello guys, I’ve found a solution to make it work with the old react-router and I suppose this should also work other outdated libraries. The solution is just to wrap the returned memorized component with a stateless component which isn’t enhanced by
memo
:@finom : no.
connect()
in React-Redux v7 usesReact.memo()
, and that’s not changing. In addition, any code that assumes components are only functions has been wrong since React 16.6 came out.If you’re using an older version of React-Router, you need to either upgrade the router version, or stick with an older version of React-Redux.