CODEWITHSUNDEEP
javascriptreactjsnext.js
Daniel Thompson
Daniel Thompson

Reputation: 2351

next.js pass props from HOC to child components getInitialProps

I'd like to create an HOC for pages in my app that supplies some information kept in local storage for the case when the pages are not rendered on the server.

I am only able to actually set the data from componentDidMount because I need access to localStorage (not avail. in Node env. obviously).

import * as React from 'react'
const withLogin = Page => class SecurePage extends React.Component {
  static async getInitialProps (ctx) {

    let language;
    if (ctx.req) {
        language = ctx.req.session.language;
    } else {
        language = localStorage.getItem('language');
    }

    let props = {}
    if (Page.getInitialProps) {
        const pageProps = await Page.getInitialProps(ctx);
        props = { ...pageProps, language }
    }

    console.log("this is what the props look like in the wrapping component", props)

    return props;

    // return Page.getInitialProps && { ...(await Page.getInitialProps(ctx)), language }
  }

  componentDidMount () {
      const { language } = this.props;
      if (language) {
          /* if we were able to fetch the language, set it here */
          localStorage.setItem('language', language);
      }
  }

  render () {
      console.log("pre-render page props ", this.props);
    return <Page {...this.props} /> 
  }
}

export default withLogin

When I go to outfit a component with it, the HOC getInitialProps function runs as expected, but it has no impact on the getInitialProps function of the rendered component. Is there no way for me to pass props to the getInitialProps of a child component through HOC pattern?

class EmployerJobList extends React.Component {
    static async getInitialProps(props) {

        if (props.req) {
            /* SSR */
            // language = req.session.language;
        } else {
            /* non-SSR */
            // language = user.preferred_language;
        }
        console.log("got language", props.language); // => undefined
        getUrl (`/api/localization?filename=create-job&language=${props.language}`)
        .then( jsonRes => {
            console.log(jsonRes);
        })
        ...
     export default withLogin(EmployerJobList)

If this is not a viable pattern; is there any reliable way for me to share/reuse the logic I am aiming for here with localStorage?

I could theoretically do this in each Page component:

static async getInitialProps(props) {

    let language;
    if (props.req) {
        /* SSR */
        language = req.session.language;
    } else {
        /* non-SSR */
        language = localStorage.getItem('language') // works
    }
    ...

But that seems unnecessarily redundant.

Upvotes: 2

Views: 7017

Answers (1)

Daniel Thompson
Daniel Thompson

Reputation: 2351

Was able to pass values into the child's getInitialProps function by supplying them as arguments:

  static async getInitialProps (ctx) {
    let language;
    if (ctx.req) {
        language = ctx.req.session.language;
    } else {
        language = localStorage.getItem('language');
    }
    let props = {}
    if (Page.getInitialProps) {
        const pageProps = await Page.getInitialProps(ctx, language); // <--- this
        props = { ...pageProps, language }
    }
    return props;
  }

Then in the child component's getInitialProps I could access the new argument:

static async getInitialProps({ query }, language) {

    console.log("is language passed through: ", language); // "en"
    const jobStatus = query.jobStatus;

    return { jobStatus }
}

Upvotes: 7

Related Questions