Combining multiple Objects in ReactJS export

Question

So I have a React component that uses the google-maps-react package along with redux

Now the thing is that I need to export connect() and the GoogleApiWrapper together. I googled a bit and found someone who did it like this :

export default connect(
  mapStateToProps,
  { saveMapCoords }
)(
  GoogleApiWrapper({
    apiKey: 'AIzaSyA5EqRGJ-YR-2ZCGxThhtFZKwNBy6wk73c'
  })
)(Maps)

Where Maps is the class name.

Unfortunately I get this error : TypeError: Object(...)(...)(...) is not a function

This is returned from the line GoogleApiWrapper

Does anyone know why this happens? They work separately but not together

Answer 1

You're closing a bracket before. The GoogleApiWrapper

GoogleApiWrapper({
  apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)
})(MapContainer)

is a HOC that'll return a new component that you'll then pass in the connect.

Try this

export default connect(
    mapStateToProps,
    { saveMapCoords }
)(
    GoogleApiWrapper({
        apiKey: "AIzaSyA5EqRGJ-YR-2ZCGxThhtFZKwNBy6wk73c"
    })(Maps)
)