title: Update React Context using a REST Api call in a functional component
body: <p>I am trying to update the context of a React App using data resulted from an API call to a REST API in the back end. The problem is that I can't synchronize the function. </p>
  
  <p>I've tried this solution suggested in this blog post <a href="https://medium.com/@__davidflanagan/react-hooks-context-state-and-effects-aa899d8c8014" rel="noreferrer">https://medium.com/@__davidflanagan/react-hooks-context-state-and-effects-aa899d8c8014</a> but it doesn't work for my case.</p>
  
  <p>Here is the code for the textContext.js</p>
  
  <pre><code>import React, {useEffect, useState} from "react";
  import axios from "axios";
  
  var text = "Test";
  
  fetch(process.env.REACT_APP_TEXT_API)
      .then(res =&gt; res.json())
      .then(json =&gt; {
        text = json;
      })
  
  
  
  
  const TextContext = React.createContext(text);
  export const TextProvider = TextContext.Provider;
  export const TextConsumer = TextContext.Consumer;
  
  export default TextContext
  </code></pre>
  
  <p>And this is the functional component where I try to access the data from the context</p>
  
  <pre><code>import TextProvider, {callTextApi} from "../../../../services/textService/textContext";
  function  Profile()
  {
  
    const text = useContext(TextProvider);
    console.log(text);
    const useStyles = makeStyles(theme =&gt; ({
      margin: {
        margin: theme.spacing(1)
      }
    }));
  </code></pre>
  
  <p>I can see the fetch request getting the data in the network section of the browser console but the context is not getting updated.</p>
  
  <p>I've tried doing this in the textContext.js.</p>
  
  <pre><code>export async function callTextApi () {
    await fetch(process.env.REACT_APP_TEXT_API)
      .then(res =&gt; res.json())
      .then(json =&gt; {
        return json;
      })
  }
  
  
  </code></pre>
  
  <p>And I was trying to get the data in the Profile.js using the useEffect function as so</p>
  
  <pre><code> const [text, setText] = useState(null);
    useEffect(()=&gt; {
      setText (callTextApi())
    },[])
  </code></pre>
  
  <p>It's my first time using React.context and it is pretty confusing. What am I doing wrong or missing?</p>