I'm trying to make [state, setState] from "App.js" available to all child components by using context API. I have managed to do so just fine for most components but it's unexpectedly giving me back this error when trying to use it deeper down in the component tree:

"TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))"

I don't understand why context is accessible for some components but not to others since they're all wrapped by the Context.Provider.

This is how I'm creating the Context (I've simplified code snippets but left everything relevant to [state, setState] and Context):

App.js

export const Context = React.createContext();

function App() {

  const [state, setState] = useState({
  step: 0,
  })

  return (
    <Context.Provider value={[state, setState]}>
    <ThemeProvider theme={theme}>
        <div className="app">
          <BrowserRouter>
            <Routes>
              <Route exact path="/" element={<Home />} />
            </Routes>
          </BrowserRouter>
        </div>
    </ThemeProvider>
    </Context.Provider>
  );
}

export default App;

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

After that I'm not using it directly in "Home" component, but I am using it in a Form component rendered by Home.jsx and it's working just fine. Form component renders children by a switch statement and its immediate children can access [state, setState] just fine by using useContext();

Form.jsx

import Step0 from "./Step0";
import Step1 from "./Step1";
import {useContext} from "react";
import { Context } from "../../App";

export default function Form () {

    const [state, setState] = useContext(Context);
    
    const nextStep = (e) => {
        e.preventDefault();
        setState({
            ...state,
            step: state.step   1
        })
    }

    const prevStep = (e) => {
        e.preventDefault();
        // console.log(state);
        setState({
            ...state,
            step: state.step - 1
        })
    }

    switch(state.step) {
        case 1: 
            return (
                <Step0 nextStep={nextStep} />
        )
        case 2:
            return (
                <Step1 nextStep={nextStep} prevStep={prevStep}/>
            )
        default:
            return (
                <h1>default</h1>
            )
    }
}

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

useContext() is working without any problems in and components and [state, setState] are accessible.

However, I get the above mentioned error when component is render from

Step1.jsx

import React, { useContext } from "react";
import { Context } from "../../App";
import Results from "./Results";

export default function Step1() {
    
    const [state, setState] = useContext(Context);

    return (
       <ResultsEquals/>
       )
}

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Results.jsx

import { useContext } from "react";
import Context from "../../App"; 

export default function Results() {

    const [state, setState] = useContext(Context);

    return (
    <h1>{state.step}</h1>
    )
}

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I solved it. I just needed to import "Context" in consumer component as {Context} with brackets and that solved it.

CodePudding user response：

If you write "{Context}" using curly braces instead of "Context" where you are importing in Results.jsx file, the problem will be solved.