title: Uncaught TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)) in my React project
body: <p>I am new to context API and trying to get my code to work. I am getting error:</p>
  <blockquote>
  <p>Uncaught TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))</p>
  </blockquote>
  <p>Would some of you good people help with this?</p>
  <p>The initialUserState logs an object the looks like this: {name: nanny}</p>
  <p>My context file is:</p>
  <pre><code>import { createContext, useState } from &quot;react&quot;;
  
  const initialUserState = JSON.parse(localStorage.getItem(&quot;user&quot;));
  console.log(initialUserState);
  const initialFormValues = {
    video: &quot;Video.mp4&quot;,
    hourly: &quot;&quot;,
    ageRange: [],
    car: &quot;&quot;,
    languages: [],
    homework: &quot;&quot;,
    license: &quot;&quot;,
    preference: &quot;&quot;,
    vaccination: &quot;&quot;,
    radius: &quot;&quot;,
    booked: &quot;&quot;,
    fileUpload: &quot;file.jpg&quot;,
  };
  
  export const Global = createContext();
  
  export default function GlobalContext({ children }) {
    const [state, setState] = useState(initialUserState);
    const [values, setValues] = useState(initialFormValues); //setting form state
    const [radioSelected, setRadioSelected] = useState();
  
    const changeState = (newState = {}) =&gt; {
      const tempState = { ...state, ...newState };
      setState(tempState);
      localStorage.setItem(&quot;user&quot;, JSON.stringify(tempState));
    };
  
    return (
      &lt;Global.Provider
        value={[
          { ...state },
          changeState,
          values,
          setValues,
          radioSelected,
          setRadioSelected,
        ]}
      &gt;
        {children}
      &lt;/Global.Provider&gt;
    );
  }
  </code></pre>
  <p>then where I am getting state from, the initialFormValues does not log in the console:</p>
  <pre><code>const HourlyRate = () =&gt; {
  
    //context API
  
    const [values, setValues] = useContext(GlobalContext); **//this is where the error is being flagged from**
  
    //handle form value changes
    const handleChange = (e) =&gt; {
      e.preventDefault();
  
      const { name, value } = e.target;
      setValues({ ...values, [name]: value });
    };
  
    return (
      &lt;div className=&quot;sub-settings-div&quot;&gt;
        &lt;Link className=&quot;back&quot; to=&quot;/video-upload&quot;&gt;
          &lt;span&gt;
            &lt;ArrowBackIcon /&gt;
          &lt;/span&gt;
          Back
        &lt;/Link&gt;
        &lt;h3 className=&quot;sub-settings-header&quot;&gt;{t(&quot;common.title&quot;)}&lt;/h3&gt;
        &lt;h2 className=&quot;sub-settings-sub-header&quot;&gt;{t(&quot;hourly.subTitle&quot;)}&lt;/h2&gt;
        &lt;p className=&quot;range&quot;&gt;(10.45 &amp;euro; - 20 &amp;euro;) &lt;/p&gt;
        &lt;form className=&quot;input&quot;&gt;
          &lt;TextField
            className=&quot;input-field&quot;
            required
            id=&quot;outlined-required&quot;
            label=&quot;Hourly Rate&quot;
            name=&quot;hourly&quot;
            value={values.hourly}
            onChange={handleChange}
          /&gt;
        &lt;/form&gt;
        &lt;div className=&quot;nav-btns&quot;&gt;
          &lt;Link to=&quot;/video-upload&quot; className=&quot;prev-link&quot;&gt;
            &lt;button className=&quot;prev&quot;&gt;{t(&quot;buttons.back&quot;)}&lt;/button&gt;
          &lt;/Link&gt;
          &lt;Link to=&quot;/age-range&quot; className=&quot;next-link&quot;&gt;
            &lt;button className=&quot;next&quot;&gt;
              {t(&quot;buttons.next&quot;)}
              &lt;span&gt;
                &lt;ArrowForwardIcon /&gt;
              &lt;/span&gt;
            &lt;/button&gt;
          &lt;/Link&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default HourlyRate;
  </code></pre>