'TypeError: Right side of assignment cannot be destructured' useContext React Hooks

Question

I am working in React Hooks and have encountered a problem with the useContext method. My context class for a MapStyle (using Google Maps API) is as follows:

import React, { createContext, useState } from 'react';

const MapStyleContext = createContext();

function MapStyleProvider(props) {
const [selectedMapStyle, setSelectedMapStyle] = useState();

return (
    <MapStyleContext.Provider value={{ selectedMapStyle, setSelectedMapStyle}}>
        {props.children}
    </MapStyleContext.Provider>
);
}

export { MapStyleContext, MapStyleProvider };

I have the map component attempting to access the selectedMapStyle property:

...
export default function Map() {
const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_MAPS_API_KEY
});
const { selectedMapStyle } = useContext(MapStyleContext);
...

Finally, in the MapStyle component, I am attempted to use the setter setSelectedMapStyle whenever the user changes the value of the radio button:

import React, { useContext } from 'react';
import { Card, CardBody, Button, FormGroup, Label, Input } from 'reactstrap';
import { MenuContext } from '../../MenuContext';
import { MapStyleContext } from '../mapStyle/MapStyleContext'
import '../Tool.css';

export default function MapStyle() {
    const {setSelectedItem} = useContext(MenuContext);
    const {setSelectedMapStyle} = useContext(MapStyleContext);

    const mapStyles = [
        { 'label': 'Map (default)', 'value': 'default' },
        { 'label': 'Grayscale (Clean)', 'value': 'cleanGray' },
        { 'label': 'Subtle Grayscale', 'value': 'subtleGray' },
        { 'label': 'Ultra light', 'value': 'ultralight' },
        { 'label': 'Clean (no labels)', 'value': 'cleanNoLabel' },
        { 'label': 'Clean (roads)', 'value': 'cleanRoads' }
    ];

    return (
        <div className="tool">
            <Card>
                <CardBody>
                    <div className="clearfix">
                        <h3 className="float-left mb-0 mr-2">Map Style</h3>
                        <Button onClick={() => setSelectedItem(null)} className="float-right" close />
                    </div>
                    <hr />
                    <FormGroup tag="fieldset">
                        {mapStyles.map(mapStyle => (
                            <FormGroup key={mapStyle.value} check>
                                <Label check>
                                    <Input type='radio' name='mapStyle' value={mapStyle.value} onChange={setSelectedMapStyle(mapStyle.value)}/>
                                    {mapStyle.label}
                                </Label>
                            </FormGroup>
                        ))}
                    </FormGroup>
                </CardBody>
            </Card>
        </div>
    );
}

I am not quite sure where I am going wrong, but the context props never seem to load in correctly (giving me the type error) when I use this context.

Did you try `onChange={() => setSelectedMapStyle(mapStyle.value)}`? — Agustin Moles, Oct 12 '20 at 23:31
Did you remember to put your `MapStyle` component inside of a `MapStyleProvider`? You won't be able to access the context if there isn't a provider somewhere above it in the tree. — Linda Paiste, Oct 13 '20 at 00:11
@LindaPaiste I did forget to wrap the MapStyle in the Provider. Thank you for the help! — Andrew, Oct 13 '20 at 04:49

score 1 · Answer 1 · answered Jan 08 '23 at 13:19

The problem you've faced here is that the value of the useContext(MapStyleContext) is null as of initialisation and you've never wrapped the parent component or the current component inside the Context.Provider.

Here is an example:

function Map() {
 return (
  <Context.Provider>
    {/*children */}
  <Context.Provider>
 );
}

'TypeError: Right side of assignment cannot be destructured' useContext React Hooks

1 Answers1