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);

Answer 1

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));