React Context TypeError：BlurChangeValue 不可迭代

Question

I am using in this example React Context and local storage using React Context I want to get value in another component but get BlurChangeValue is not iterable:

SideBarBlurChange.jsx

import React, {useState, createContext} from "react";
import {getTrackBackground, Range} from "react-range";

const STEP = 0.1;
const MIN = 0;
const MAX = 100;

export const BlurContext = createContext([]);

export default function SideBarBlurChange(props) {

    const ls = parseInt(window.localStorage.getItem('values'));
    const [values, SetValues] = useState(ls ? [ls] : [50]);

    const SaveChanges = () => {
        localStorage.setItem('values', values);
    }

    return (
        <>
            <BlurContext.Provider value={{
                BlurChangeValue: [values, SetValues],
            }
            }>
                <div
                    style={{
                        display: "flex",
                        justifyContent: "center",
                        flexWrap: "wrap",
                    }}
                    // More jsx
           </BlurContext.Provider>
        </>
    );
}

SideBar.jsx

export default function SideBar(props) {

    const {BlurChangeValue} = React.useContext(BlurContext)
    const [values] = BlurChangeValue;

    return (
        <div className={"headline_sidebar_wrapper"}>
            <article className={`${Blur.glass} ${Blur.up}`}>
                <nav id="sidebar" className="sidebar-wrapper modal">
                    <div style={{backgroundImage: `url(${SideBarBackground})`}}>
                        <div style={{background: SideBarTheme, backdropFilter: `blur(${values})`}}
                             className={`${Blur.SideBar_Page_Content} ${Blur.SideBarContainer}`}>
                        </div>
                    </div>
                </nav>
            </article>
        </div>
    );
}

I want to use the value values inside JSX to get a blur effect, all other contexts work fine, I just deleted them to make it easier to read the code.

Answer 1

I think the main issue here is the initial value of BlurContext . Try as instead:

export const BlurContext = createContext({
   BlurChangeValue: [],
});

Read further about React.createContext .

Answer 2

you have to destruct the context object in the SideBar element first:

const {BlurChangeValue} = {...React.useContext(BlurContext)}