Context API with React Hooks. error "Cannot read property '' of null" I'm stuck :(

JavaScript
1

I would like to make app which you can write your username of GitHub Acount and show your repositories on next page. But I have problem with GlobalStore (Context API).

I can’t read property of state “data” or “user” in children.

I’ve got a error

TypeError: Cannot read property ‘data’ of null

export const Context = React.createContext(null);

function GlobalContext(props) {
  const [user, setUser] = useState(0);
  const [data, setData] = useState(0);
  let inputValue = null;

  const valueHandler = (event) => {
    inputValue = event.target.value;
  };

  const submitHandler = (e) => {
    e.preventDefault();
    setUser(inputValue);
  };

  useEffect(() => {
    const fetchData = async () => {
      const respUser = await axios(`https://api.github.com/users/${user}`);
      const respRepos = await axios(`https://api.github.com/users/${user}/repos`);

      setData({user: respUser.data, repos: respRepos.data})
    };

    fetchData();

    console.log(data)

  }, [user]);

  return (
    <Context.Provider value={{data: data, user: user, valueHandler, submitHandler}}>
      {props.children}
    </Context.Provider>
  )
}

There is my App function:

function App() {
  const context = useContext(Context);

  // console.log(context.data);
  if (context.data == null) {

  }
  return (
    <GlobalContext>
      <React.Fragment>
        <GlobalStyles/>
        <Home/>
      </React.Fragment>
    </GlobalContext>
  )
}

I tried to change value of useState to string/number and it’s doesn’t work… How to fix it? How to make it will works??

2

I think you have it backwards. You’re trying to useContext outside of Context.Provider, that’s why it never changes.

From the structure I see, useContext should be inside either <Home /> or <GlobalStyles />

3

Have you imported the context into the file containing App?

import { Context } from './GlobalStore.js'