CODEWITHSUNDEEP
reactjsreact-hooks
Erik Martín Jordán
Erik Martín Jordán

Reputation: 4853

createContext using a dynamic object

1. Static object

To create context based on a static object, I use this code:

import React, { createContext } from 'react';

const user = {uid: '27384nfaskjnb2i4uf'};

const UserContext = createContext(user);

export default UserContext;

This code works fine.

2. Dynamic object

But if I need to create context after fetching data, I use this code:

import React, { createContext } from 'react';

const UserContext = () => {

    // Let's suppose I fetched data and got user object
    const user = {uid: '18937829FJnfmJjoE'};

    // Creating context
    const context = createContext(user);

    // Returning context
    return context;

}

export default UserContext;

Problem

When I debugg option 1, console.log(user) returns the object. Instead, option 2, console.log(user) returns undefined. What I'm missing?

import React, { useEffect, useState, useContext }     from 'react';
import UserContext                                    from './UserContext';

const ProjectSelector = (props) => {

    const user = useContext(UserContext);

    console.log(user);

    return(...);
}

export default App;

Upvotes: 3

Views: 12694

Answers (1)

Ayyappa Gollu
Ayyappa Gollu

Reputation: 966

one thing i would suggest is move this logic to a react component itself. anhow you need to use a Provider in which you will set value to be the value consumers need to consume.useEffect is greatway to do asynchronous updates, like your requirment. so , use a state variable as value of provider.in useEffect you fetch the data and update the state variable which in turn will update context value. following is the code

UserContext.js

import { createContext } from "react";

const UserContext = createContext();

export default UserContext;

App.js

export default function App() {
  const [user, setUser] = useState();

  useEffect(() => {
    console.log("here");
    fetch("https://reqres.in/api/users/2")
      .then(response => {
        return response.json();
      })
      .then(data => {
        setUser(data);
      });
  }, []);

  return (
    <div className="App">
      <UserContext.Provider value={user}>
        <DummyConsumer />
      </UserContext.Provider>
    </div>
  );
}

DummyConsumer.js

import React, { useContext } from "react";
import UserContext from "./UserContext";

const DummyConsumer = () => {
  const dataFromContext = useContext(UserContext);
  return <div>{JSON.stringify(dataFromContext)}</div>;
};

export default DummyConsumer;

demo:anychronus context value providing

Upvotes: 8

Related Questions