Why Are Objects Not Iterable in JavaScript

Why is this not iterable?

input is not an array, but an object. Change the for-loop to:

for (let item of Object.values(input)) {  
   
   /*rest of the code*/ 

}

so the iteration is done over the object values rather than the object itself.

Uncaught TypeError: object is not iterable --using context with reducer

The value provided to Context is an object

{meatState:meatState,dispatchMeatState:dispatchMeatState}

But you're using array destructuring while getting the values

const [meatState, dispatchMeatState ] = useContext(MeatContext)

Using object destructuring should solve it,

const { meatState, dispatchMeatState } = useContext(MeatContext)

object is not iterable JavaScript

You can check if myArray is object and then convert it to an array of one object.

for(let singleItem of Array.isArray(myObj) ? myObj : [myObj]){

TypeError: Object is not iterable when working with react context

I got behind some tutorials again and found my mistake. I had my .Provider tag in the wrong file. It's supposed to be in the App where the Router is, where you call all the components so they all have access to the context.

function RouterApp() {

    const [ board, setBoard ] = useState(null);

    const value = useMemo(() => ({ board, setBoard}), [ board, setBoard])

    return (
        <Router>
            <div className="App">
                <BoardContext.Provider value={value}>
                    <Switch>
                        <Route path="/" exact component={BoardName} />
                        <Route path="/createboard/:name" exact component={TimePeriod} />
                        <Route path="/createboard:name/phases" exact component={PhaseForm} />
                    </Switch>
                </BoardContext.Provider>

            </div>
        </Router>
    );
}

export default RouterApp;

Here's my router function, where im passing the context to the components to BoardName, TimePeriod and PhaseForm.

Thanks for everyone helping me.

---

Related Topics