React: Passing values to a context returns: 'TypeError: Right side of assignment cannot be destructured'

Question

I have a search function for which I'm attempting to raise the state into a parent component.

However, on attempting to submit the form I am presented with the error TypeError: Right side of assignment cannot be destructured and in reference to the line const {searchValues, setSearchValues} = useContext(SearchContext); in Search.js. I've been basing this code on this YouTube tutorial and can't seem to replicate the functionality when I have multiple values to pass and set.

SearchContext.js

import { createContext} from 'react'

export const SearchContext = createContext(null);

Body.js

Some code removed for readability.

import React, {useState} from "react";
import WikiHeader from './wikiheader/WikiHeader'
import WikiReference from './wikireference/WikiReference'
import Search from './search/Search'
import GoogleAd from './googlead/GoogleAd'

import {SearchContext} from "../contexts/SearchContext"
import {SummaryContext} from "../contexts/SummaryContext"
import {ReferenceContext} from "../contexts/ReferenceContext"

function Body() {

    const [searchValues, setSearchValues] = useState({
      searchCriteria: "",
      resultId: ""
    });

  return (

    <>
      <SearchContext.Provider values={searchValues} onChange={setSearchValues}>
          <Search />
      </SearchContext.Provider>
    </> 
  );

export default Body;

Search.js

import React, {useContext, Component} from "react";
import {SearchContext} from "../../contexts/SearchContext"
import "../../App.css"

function handleSubmit(event) {
    event.preventDefault();

    //fetch('http://127.0.0.1:5002/events/search/'+this.state.searchCriteria)
    fetch('https://gist.githubusercontent.com/TheMightyLlama/e0ab261b30b7c957930b8eac29813180/raw/f39ea1323762b9dd796db7370a73f1a727e12566/gistfile2.txt')
    .then(res => res.json())
    .then((resultsData) => {

      this.setState({
        resultId: resultsData
      })

      console.log(resultsData);
    })
    .catch(console.log)

  };

export function Search (){

    const {searchValues, setSearchValues} = useContext(SearchContext);

    return (
      <div className="search container center">
        <div className="input-group input-group-sm mb-3 center">
          <div className="input-group-prepend">
            <span className="input-group-text" id="inputGroup-sizing-sm">Wikipedia URL:</span>
          </div>
          <form onSubmit={(event) => {setSearchValues({searchCritera:event.target.value, resultId:1})}} center>
          <input 
            type="text" 
            className="form-control center" 
            aria-label="Sizing example input" 
            aria-describedby="inputGroup-sizing-sm" 
            value={searchValues.searchCriteria} 
            onChange={event => {searchValues.searchCriteria = event.target.value} } 
            onFocus={() => {setSearchValues({searchCritera:'', resultId:''})}}
            placeholder="Add a Url" />
          </form>

        </div>
      </div>
    );

}
export default Search;

Answer 1

You should provide the value you want to retrieve from useContext(SearchContext) to the property value of SearchContext.Provider.

So, in Body.js:

…
    const searchState = useState({
      searchCriteria: "",
      resultId: ""
    });

  return (

    <>
      <SearchContext.Provider value={searchState}>
          <Search />
      </SearchContext.Provider>
    </> 
  );
…

and in Search.js:

…
const [searchValues, setSearchValues] = useContext(SearchContext);
…