How to call Hooks in _app.js

[sanji-o]

I am trying to call a hook that grabs the data of an authenticated user. I cant seem do that anywhere in _app.js
without getting an error.

Server ErrorError: Invalid hook call. Hooks can only be called inside of the body of a function component.

Any suggestions

[laugharn]

You need to write _app.js as a functional component.

function App({ Component, pageProps }) {
  const [value, setValue] = useState()

  return <Component {...pageProps} />
}

export default App

[sanji-o]

export default class MyApp extends App {
  state = {
    state1: false,
    state2: true,
  };

  render() {
    const { Component, pageProps } = this.props;
    return (
      <div style={content}>
        <Content>
          <Component {...pageProps} />
        </Content>
      </div>
    );
  }
}

Any quick suggestion for this? Cheers.

[laugharn]

I would recommend reading up on class vs. functional components: https://reactjs.org/docs/components-and-props.html#function-and-class-components. The above would look something like this:

import { useState } from 'react'

function App({ Component, pageProps }) {
  const [state, setState] = useState({
    state1: false,
    state2: true,
  })

  return <div style={content}><Content><Component {...pageProps} /></Content></div>
}

export default App

However, content and Content are undefined in your example.