-1

Every time I run yarn start with the following line of code const context = useContext(GlobalContext); I run into this "Error: Invalid hook call. Hooks can only be called inside of the body of a function component." How can I fix this it's driving me mental. here's a screenshot showing the error, the dependencies and my code error message and react dependecies

here is the code for my globalState if that's whats causing it

import React, { createContext, useReducer } from "react";
import AppReducer from './AppReducer';

// initial state
const initialState = {
    healthData:
        { age: "38", gender: "male", goal: "Lose", height: "180.34", weight: 80 }

}

export const GlobalContext = createContext(initialState);

// provider component
export const GlobalProvider = ({ children }) => {
    const [state, dispatch] = useReducer(AppReducer, initialState);


    return (<GlobalContext.Provider value={{
        healthData: state.healthData
    }}>
        {children}
    </GlobalContext.Provider>);
}

export default (state, action) => {
    switch(action.type) {
        default:
            return state;
    }
}

  return (
      <div>
        <Router>
          <div className='App'>
            {this.state.user ? (<Nav drawerClickHandler={this.drawerToggleClickHandler} />) : (<Login_bar />)}
            <SideDrawer sidedrawerClickHandler={this.sidedrawerToggleClickHandler} show={this.state.sideDrawerOpen} />
            {backdrop}
            <GlobalProvider>
              {this.state.user ?
                (< Switch >
                  <Route path='/settings_page' component={settings_page} exact />,
                  <Route path='/setup_page' component={setup_page} exact />,
                  <Route path='/' component={Main_page} />
                </Switch>) : (<Login_page />)}
            </GlobalProvider>
          </div>
        </Router>
      </div >

    );

So I've done some research into this and apparently it's likely that either my react or react-dom are not up to date. Iv tried updating both multiple time and running npm install. didn't fix my issue, I'm also almost certain that I'm calling on hooks correctly. Another thing is my global state is set up correctly because I can see it in the react chrome extension.

lukeet
  • 461
  • 1
  • 4
  • 22
  • Why does the example have a lonely return outside a function? I’m also pretty sure that useContext can’t be used inside componentDidMount (I sure it needs to be in the constructor). It has to follow the rule of hooks. – evolutionxbox Mar 30 '20 at 11:24
  • Sorry let me just edit that they're snippets of code from different .js flies that all make up the globalState. That's not actually the code of any of my .js files. I thought the post would be to long if I included all the code – lukeet Mar 30 '20 at 11:27
  • did you see my comment edit? I think the rules of hooks are being broken which is why it doesn’t work. – evolutionxbox Mar 30 '20 at 11:28
  • I did try it in the constructor before I updated react-dom just trying now. I've also tried in render() – lukeet Mar 30 '20 at 11:30
  • https://imgur.com/EqPM4QS didn't work I'm pretty sure I should be able to call Hooks in any function shouldn't I? when looking ti up all I can see is that react-dom needs to be updated which I've done multiple times – lukeet Mar 30 '20 at 11:31
  • Hang on. I’m being silly... Hooks cannot be used inside a class component. – evolutionxbox Mar 30 '20 at 11:31
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/210582/discussion-between-lukeet-and-evolutionxbox). – lukeet Mar 30 '20 at 11:32
  • Consider reading through [this article](https://www.taniarascia.com/using-context-api-in-react/) on how to use a context with a class component? – evolutionxbox Mar 30 '20 at 11:33

1 Answers1

1

Thats because Hooks can not be used in a class based component. Alternatively you can create a HOC component an use it in your class based component, or covert your class component into functional component.

Muhammad Haseeb
  • 1,269
  • 12
  • 22
  • I think the easiest thing would converting my component to a functional component thanks – lukeet Mar 30 '20 at 11:39
  • @lukeet I personally find them to be simpler anyway. – evolutionxbox Mar 30 '20 at 11:40
  • Any good documentation you know of, to show me how to convert to a funtional component or is google my friend here? – lukeet Mar 30 '20 at 11:42
  • If this context has to be used in many class based components(already written), then you can create a HOC otherwise, yes its better to convert component into functional component. – Muhammad Haseeb Mar 30 '20 at 11:43
  • Covering class component to functional component : https://scotch.io/tutorials/5-ways-to-convert-react-class-components-to-functional-components-w-react-hooks – Muhammad Haseeb Mar 30 '20 at 11:44
  • can I still use conditional rendering in a function component due to the lack of a render()? – lukeet Mar 30 '20 at 11:48