title: Object is not iterable Error while Using React-Context
body: <p>So I recently started using React and am learning the Context Api. The zest of my code is:</p>
  
  <pre class="lang-js prettyprint-override"><code>export const UsersContext = createContext();
  export function UsersProvider(props) {
      const fetchedItem = async function () {
          const data = await fetch('https://jsonplaceholder.typicode.com/users');
          const users = await data.json();
          setUsers(users);
      };
      const [users, setUsers] = useState([]);
      useEffect(function () {
          fetchedItem();
      }, []);
  
      return (
          &lt;UsersContext.Provider value={[users, setUsers]}&gt;{props.children}&lt;/UsersContext.Provider&gt;
      );
  }
  </code></pre>
  
  <p>And I try to import and iterate over the users array like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { UsersContext, UsersProvider } from './UsersContext';
  export default function UsersPage() {
      const [users, setUsers] = useContext(UsersContext);
  return (
          &lt;UsersProvider&gt;
  {users.map(function (user) {
  //I do something with user object});}
  &lt;/UsersProvider&gt;
  </code></pre>
  
  <p>The issue is this does not work and I am not sure what the terminologies are to search it on the web. I get <code>TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))</code> which to me means that <code>users</code> is not an array? But it is as far as I am concerned.
  Any suggestions for fixing/debugging this?</p>