React - How to get the value of the hooks inside the context

Question

I have a LessonThemes component. I use a hook then I use the context to apply logic inside the Test component, the problem is that I don't understand how to get the color value from the hook and apply it inside the context. export const CounterContext = createContext ([ ]); I need to apply value color inside CounterContext

LessonThemes.jsx

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

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>
    );
}

export const CounterContext = createContext([]);

Lesson.js

import React, { useContext } from "react";
import "./css/Sidebar.css";

export default function Test(props) {
    const [color] = useContext(CounterContext);

    return (
        <div className="page-wrapper chiller-theme toggled">
            <LessonThemes />
            <div style={{background: color}}>
                <i className="fas fa-bars"></i>
            </div>
        </div>
    );
}

Answer 1

There doesn't seem to be anything wrong with the way you are doing it, but it's not clear on how you need to consume that Context.Provider.

I'm assuming you've made an example with minimal functionality, because from your example code, there is no need to the Context to be there in the first place, since you are not rendering any component "under" the context provider.

This is how you would consume it from a nested component. I.e: a component under the <YourContext.Provider/>.

const CounterContext = React.createContext([]);

function LessonThemes(props) {
  const [color, setColor] = React.useState("initialColor");

  const [themes, setThemes] = React.useState([
    { name: "G", color: "green" },
    { name: "R", color: "red" },
    { name: "B", color: "blue" },
  ])
  
  const inputItems = themes.map((theme,index) => (
    <React.Fragment>
       <label key={index}>
         <input
           onChange={() => setColor(theme.color)}
           type="radio"
           name="background"
         />
         {theme.name}
       </label>
    </React.Fragment>
  ));

  return (
    <CounterContext.Provider value={[color, setColor]}>
      {inputItems}
      <NestedComponent/>
    </CounterContext.Provider>
    );
}

// NESTED COMPONENT THAT WILL CONSUME THE CONTEXT

function NestedComponent() {
  const [color,setColor] = React.useContext(CounterContext);
  return(
    <div>
      <div>I am NestedComponent</div>
      <div><b>color:</b>{color}</div>
    </div>
  );
}

ReactDOM.render(<LessonThemes/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>