Pass a parameter into namespace in react i18next

Question

I am using react i18next and I need to pass namespace which I get from the previous screen as a navigation prop. Code for my second screen is as follows.

import { withTranslation } from "react-i18next"
let params = ""

class SecondScreen extends PureComponent {
    constructor(props) {
      super(props)
      const { navigation } = props
      params = navigation.getParam("params", {})
    }
    render() {
      ....
    }
}
export default withTranslation([`namespace1/${params}`])(SecondScreen))

I got that it can be done using useTranslation, but I need to continue my work with withTranslation as I am using class components. Any help would be highly appreciated!!!

Answer 1

This won't work as you are already wrapping your component during the compilation process and so withTranslation is getting passed namespace/. The injection of props, well, happens during the run.

On the lines of this answer, try writing an outer class that wraps this class SecondScreen as an inner class with the withTranslation HOC in its render method.