javascript - React - When using Hooks, I get an error - Object is not iterable (cannot read property Symbol (Symbol.iterator))

Question

I use hooks inside the LessonThemes component, using the context, I try to access the color value inside the Test component, but I get an error

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

LessonThemes.jsx

import React, {useState, useEffect, createContext} from "react";
import ThemeContext from "./ThemeContext";

export const CounterContext = createContext();

export default function LessonThemes(props) {
    const [color, setColor] = useState(localStorage.getItem("color"));

    const [themes, setThemes] = useState([
        { name: "G", color: "green" },
        { name: "R", color: "red" },
        { name: "B", color: "blue" },
    ])

    useEffect(() => {
        localStorage.setItem("color", color);
    })

    const SideBarPageContent = (SideBarPageContentBackground) => {
        localStorage.setItem('color', SideBarPageContentBackground);
        setColor(SideBarPageContentBackground);
    }

    return (
        <CounterContext.Provider value={[color, setColor]}>
            {
                themes.map((theme, index) => {
                    return (
                        <label key={index}>
                            <input
                                onChange={() => SideBarPageContent(theme.color)}
                                type="radio"
                                name="background"
                            />{theme.name}</label>
                    );
                })
            }
        </CounterContext.Provider>
    );
}

Test.jsx

export default function Test(props) {

  const [color] = useContext(LessonThemes);

  return (
    <div>
      <div className="sidebar-brand-container">
        <LessonThemes />
      </div>
      <div>
        <span style={{ background: color }} href="#">Theme</span>
      </div>
    </div>
  );
}

question from:https://stackoverflow.com/questions/65876586/react-when-using-hooks-i-get-an-error-object-is-not-iterable-cannot-read-p

Answer 1

LessonThemes is a react component, it's providing the context to its children. CounterContext is the context you need to access in Test.

import { CounterContext } from '../path/to/CounterContext';

export default function Test(props) {

  const [color] = useContext(CounterContext);

  return (
    <div>
      <div className="sidebar-brand-container">
        <LessonThemes />
      </div>
      <div>
        <span style={{ background: color }} href="#">Theme</span>
      </div>
    </div>
  );
}

You should probably also define an initial context value in case Test isn't being rendered into a React DOMTree with a CounterContext as an ancestor.

export const CounterContext = createContext([]);