React Redux export default with 2 functions

Question

I'm very new to React so please forgive me if this is a stupid question but I'm stuck on the following:

Currently I have this:

export default connect()(PrechatForm);

Now I want to translate some text of the text inside the render function with react-i18next. Their guides say I have to do something like this:

export default translate()(PrechatForm);

But since the connect function is already there I'm not sure how to combine these to. In the end I guess it should look something like this: (which isn't valid JS of course)

export default connect(PrechatForm)()translate()(PrechatForm);

The whole example looks like this:

import { connect } from 'react-redux'
import { translate } from 'react-i18next';

class PrechatForm extends Component {
  constructor(props) {
    super(props);
  }
  render() {
  const { t } = this.props;
    return (
      {t.('translateme')}
    );
  }
}

export default connect()(PrechatForm);

Dan Homola · Accepted Answer · 2017-02-10 13:32:04Z

9

Straight forward solution is to use

export default translate()(connect()(PrechatForm));

I.e. first connecting to Redux and then translating the connected component.

EDIT: To help visualise you can see it like this

const connector = connect();
const translator = translate();

export default translator(connector(PrechatForm));

answered Feb 10, 2017 at 13:32

Dan Homola

4,6352 gold badges32 silver badges45 bronze badges

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

1 Comment

Bart Over a year ago

Thanks for the edit, that makes it clear whats happening!

Collectives™ on Stack Overflow

React Redux export default with 2 functions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related