Question

70

How to get state of _app.js in Next.js?

rated 0 times [ 74] [ 4] / answers: 1 / hits: 17435 / 6 Years ago, tue, december 4, 2018, 12:00:00

I have initiated a state in _app.js using Next.js.
I would like to use this state in the index.js file.
How can I access it?

This is my _app.js code:

import React from 'react';

import App, { Container } from 'next/app';

import Layout from '../components/Layout';



export default class MyApp extends App {

  constructor(props) {

    super(props);

    this.state = {

      currencyType: {

        name: 'Ether',

        price: 1,

      },

      ethPriceUsd: 1,

    };

  }



  static async getInitialProps({ Component, router, ctx }) {

    let pageProps = {};

    let ethPriceUsd;



    if (Component.getInitialProps) {

      fetch(`https://api.coingecko.com/api/v3/coins/ethereum/`)

        .then((result) => result.json())

        .then((data) => {

          ethPriceUsd = parseFloat(data.market_data.current_price.usd).toFixed(

            2

          );

        });

      pageProps = await Component.getInitialProps(ctx);

    }



    return { pageProps, ethPriceUsd };

  }



  componentDidMount() {

    const ethPriceUsd = this.props.ethPriceUsd;

    this.setState({ ethPriceUsd });

  }



  onCurrencyTypeChange(currencyTypeValue) {

    let currencyType = {};

    //Value comes from Header.js where Ether is 0 and USD is 1

    if (currencyTypeValue) {

      currencyType = {

        name: 'USD',

        price: this.state.ethPriceUsd,

      };

    } else {

      currencyType = {

        name: 'Ether',

        price: 1,

      };

    }

    alert('We pass argument from Child to Parent: ' + currencyType.price);

    this.setState({ currencyType });

  }



  render() {

    const { Component, pageProps } = this.props;

    return (

      <Container>

        <Layout changeCurrencyType={this.onCurrencyTypeChange.bind(this)}>

          <Component {...pageProps} />

        </Layout>

      </Container>

    );

  }

}

A lot of it is irrelevant (Like passing the data to the Layout etc...). All I want to do is use this state in my index.js.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

myakylas

Add To Favorites

Follow

Total Points: 66

Total Questions: 85

Total Answers: 95

Location: Guadeloupe

Member since Sat, Aug 22, 2020

4 Years ago

myakylas questions

1 NestJS, how and where to build response DTOs

Thu, Apr 28, 22, 00:00, 2 Years ago

1 How to render a popup by calling a function?

Thu, Apr 8, 21, 00:00, 3 Years ago

1 Make useEffect hook run before rendering the component

Sat, Sep 19, 20, 00:00, 4 Years ago

1 Angular Material sorting, Cannot set property 'sort' of undefined

Thu, Aug 8, 19, 00:00, 5 Years ago

1 Background Color of Material UI Snackbar not being overridden

Wed, May 29, 19, 00:00, 5 Years ago

View All

answered 6 Years ago jacie · Accepted Answer

let's say you have this code in _app.js.

import React from 'react'

import App, { Container } from 'next/app'



export default class MyApp extends App {

  static async getInitialProps({ Component, router, ctx }) {

    let pageProps = {}



    if (Component.getInitialProps) {

      pageProps = await Component.getInitialProps(ctx)

    }



    return { pageProps }

  }



  state = {

    name: Morgan,

  }



  render () {

    const { Component, pageProps } = this.props



    return (

      <Container>

        <Component {...pageProps} {...this.state}/>

      </Container>

    )

  }

}

Please notice the state and <Component {...pageProps} {...this.state}/>

Solution 1:

Now, let's see how can we use it in index.js or any other pages

import React from 'react';



export default class Index extends React.Component {



  render() {

    return (

      <div>

        <h2>My name is {this.props.name}</h2>

      </div>

    )

  }

}

You can use them as props like this this.props.name

Solution 2:

Populate state in the index.js from props and then access it from state

import React from 'react';



export default class Index extends React.Component {



   constructor(props) {

       super(props)

       this.state ={

           name: this.props.name

       }

   }



  render() {

    return (

      <div>

        <h2>My name is {this.state.name}</h2>

      </div>

    )

  }

}

You can use them as props like this this.state.name