title: React: Passing values to a context returns: 'TypeError: Right side of assignment cannot be destructured'
body: <p>I have a search function for which I'm attempting to raise the state into a parent component.</p>
  <p>However, on attempting to submit the form I am presented with the error <code>TypeError: Right side of assignment cannot be destructured</code> and in reference to the line <code>const {searchValues, setSearchValues} = useContext(SearchContext);</code> in <code>Search.js</code>. I've been basing this code on <a href="https://youtu.be/lhMKvyLRWo0?t=345" rel="nofollow noreferrer">this YouTube tutorial</a> and can't seem to replicate the functionality when I have multiple values to pass and set.</p>
  <h2>SearchContext.js</h2>
  <pre><code>import { createContext} from 'react'
  
  export const SearchContext = createContext(null);
  </code></pre>
  <h2>Body.js</h2>
  <p>Some code removed for readability.</p>
  <pre><code>import React, {useState} from &quot;react&quot;;
  import WikiHeader from './wikiheader/WikiHeader'
  import WikiReference from './wikireference/WikiReference'
  import Search from './search/Search'
  import GoogleAd from './googlead/GoogleAd'
  
  import {SearchContext} from &quot;../contexts/SearchContext&quot;
  import {SummaryContext} from &quot;../contexts/SummaryContext&quot;
  import {ReferenceContext} from &quot;../contexts/ReferenceContext&quot;
  
  function Body() {
  
      const [searchValues, setSearchValues] = useState({
        searchCriteria: &quot;&quot;,
        resultId: &quot;&quot;
      });
  
    return (
  
      &lt;&gt;
        &lt;SearchContext.Provider values={searchValues} onChange={setSearchValues}&gt;
            &lt;Search /&gt;
        &lt;/SearchContext.Provider&gt;
      &lt;/&gt; 
    );
  
  export default Body;
  </code></pre>
  <h2>Search.js</h2>
  <pre><code>import React, {useContext, Component} from &quot;react&quot;;
  import {SearchContext} from &quot;../../contexts/SearchContext&quot;
  import &quot;../../App.css&quot;
  
  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 =&gt; res.json())
      .then((resultsData) =&gt; {
  
        this.setState({
          resultId: resultsData
        })
  
        console.log(resultsData);
      })
      .catch(console.log)
  
    };
  
  export function Search (){
  
      const {searchValues, setSearchValues} = useContext(SearchContext);
  
      return (
        &lt;div className=&quot;search container center&quot;&gt;
          &lt;div className=&quot;input-group input-group-sm mb-3 center&quot;&gt;
            &lt;div className=&quot;input-group-prepend&quot;&gt;
              &lt;span className=&quot;input-group-text&quot; id=&quot;inputGroup-sizing-sm&quot;&gt;Wikipedia URL:&lt;/span&gt;
            &lt;/div&gt;
            &lt;form onSubmit={(event) =&gt; {setSearchValues({searchCritera:event.target.value, resultId:1})}} center&gt;
            &lt;input 
              type=&quot;text&quot; 
              className=&quot;form-control center&quot; 
              aria-label=&quot;Sizing example input&quot; 
              aria-describedby=&quot;inputGroup-sizing-sm&quot; 
              value={searchValues.searchCriteria} 
              onChange={event =&gt; {searchValues.searchCriteria = event.target.value} } 
              onFocus={() =&gt; {setSearchValues({searchCritera:'', resultId:''})}}
              placeholder=&quot;Add a Url&quot; /&gt;
            &lt;/form&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      );
  
  }
  export default Search;
  </code></pre>