ReactJS export multiple wrapper functions one component

Question

In react I'm trying to export a class called IconButtons, the current export I have is this:

export default withStyles(styles)(IconButtons);

This works great, but decided my app needed Redux, so I need to add the Connect wrapper function. I tried the following code:

const iconExports = { 
    reduxConnect() { connect(mapStateToProps)(IconButtons) },
    stylesExport() { withStyles(styles)(IconButtons)}
}

export default iconExports;

This gives me an error:

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

How do I use both of these functions for one export?

Try export default connect(mapStateToProps)(withStyles(styles)(IconButtons)); — Prakash Sharma
– Prakash Sharma, Commented Nov 25, 2017 at 18:52
I'm assuming the error shows when you try to use the imported iconExports. The imported iconExports is now an object, and where you're using it is expecting a String. Show us that code, but you probably just need to pass in iconExports.stylesExport() instead. — billjamesdev
– billjamesdev, Commented Nov 25, 2017 at 20:12
Try reduxConnect() { return connect(... and stylesExport() { return with... — zer0chain
– zer0chain, Commented Nov 25, 2017 at 22:20

julioolvr · Accepted Answer · 2017-11-25 20:15:58Z

tl;dr: export default withStyles(styles)(connect(mapStateToProps)(IconButtons))

Why? In your first example, you're exporting a single component, which is the result of calling withStyles(styles)(IconButtons). When you changed it, you created an object with two methods: reduxConnect and stylesExport. Each of them returns a different component. I don't know how you were trying to use this exported value, but I assume this is not what you intended, and that what you want is a single component that uses wrapped in both connect and withStyles.

I suggest you read about higher order components (both connect and withStyles are functions that return higher order components). The short story is that a HoC wraps a component and returns a new one. So, connect expects you to give it a component and returns a connected component. You can then give that component to withStyles. A more verbose solution that will perhaps make everything more clear is this:

const connectedIconButtons = connect(mapStateToProps)(IconButtons)
const connectedIconButtonsWithStyles = withStyles(styles)(connectedIconButtons)

export default connectedIconButtonsWithStyles

See how you first wrap IconButtons with connect, and then rewrap it with withStyles.

Collectives™ on Stack Overflow

ReactJS export multiple wrapper functions one component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related