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 ponentDidMount 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 ponent", props)

    return props;

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

  ponentDidMount () {
      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 ponent with it, the HOC getInitialProps function runs as expected, but it has no impact on the getInitialProps function of the rendered ponent. Is there no way for me to pass props to the getInitialProps of a child ponent 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 ponent:

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.

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 ponentDidMount 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 ponent", props)

    return props;

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

  ponentDidMount () {
      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 ponent with it, the HOC getInitialProps function runs as expected, but it has no impact on the getInitialProps function of the rendered ponent. Is there no way for me to pass props to the getInitialProps of a child ponent 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 ponent:

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.

• javascript
• reactjs
• next.js

Share Improve this question Follow asked Jan 16, 2019 at 5:05 Daniel ThompsonDaniel Thompson 2,35144 gold badges2525 silver badges3838 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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 ponent'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 }
}