title: How to keep a value with react context?
body: <p>Here are 3 basic components <code>searchBar</code> which refers to the <strong>search bar form</strong>  and, the <code>searchPage</code> component which <strong>displays the search results</strong>, and of course, the <code>app</code> component which <strong>contains them all</strong>.</p>
  <p><strong>mechanism:</strong></p>
  <ol>
  <li>the user submits an input in the <strong>searchBar component</strong>, the
  <code>handleSubmit</code> function gets fired, which changes the state of
  <code>setSearchedProducts</code> to the input value, by <code>useContext</code> <strong>AND</strong>
  getting pushed to the (&quot;/SearchPage&quot;) by <code>history.push()</code> .</li>
  </ol>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {useState, useContext } from "react";
  import { useHistory } from "react-router-dom";
  import { LocaleContext } from "../../../LocaleContext";
  
  
  
  const SearchBar = () =&gt; {
      const history = useHistory();
      const {setSearchedTerm} = useContext(LocaleContext);
  
      
      const handleSubmit = (SearchTerm) =&gt; {
          setSearchedProducts(SearchTerm)
          history.push("/SearchPage");
      }
      
      
      return (
        &lt;form&gt;
          &lt;input onSubmit={(e) =&gt; handleSubmit(e.target.value)}&gt;
          &lt;/input&gt;
          &lt;button type="submit"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
      )
  }
  
  export default SearchBar</code></pre>
  </div>
  </div>
  </p>
  <ol start="2">
  <li>the value gets sent to the <strong>app component</strong> by react context and
  the state gets set to the value while still pushing to the
  (&quot;/searchPage&quot;).</li>
  </ol>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { useState, useMemo } from "react";
  import { searchBar, searchPage } from "./components";
  import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
  import  {LocaleContext} from "./LocaleContext"
  
  
  const App = () =&gt; {
  
   const [searchedTerm, setSearchedTerm] = useState("");
  
  
   const providerValue = useMemo(() =&gt; ({searchedTerm, setSearchedTerm}),
   [searchedTerm, setSearchedTerm])
  
  
  
      return (
          &lt;Router&gt;
              &lt;LocaleContext.Provider value={providerValue}&gt;
              
                  &lt;searchBar /&gt;
                  
                  &lt;Switch&gt;
                      &lt;Route exact path="/SearchPage"&gt;
                          &lt;SearchPage /&gt;
                      &lt;/Route&gt;
                  &lt;/Switch&gt;
  
              &lt;/LocaleContext.Provider&gt;
          &lt;/Router&gt;
  
      );
  }
  
  export default (App);</code></pre>
  </div>
  </div>
  </p>
  <ol start="3">
  <li>displaying the <strong>searchPage component</strong>, which gets the state value
  by using <code>useContext</code>, and with <code>useEffect</code>, the <code>fetchProducts()</code>
  function gets fired, that fetches a set of <strong>products</strong> based on the
  state value.</li>
  </ol>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {useState, useEffect, useContext}  from 'react';
  import { LocaleContext } from "../../LocaleContext";
  
  const SearchPage = ({}) =&gt; {
  
    const [products, setProducts] = useState([]);
    const {searchedTerm} = useContext(LocaleContext);
  
    const fetchProducts = (term) =&gt; {
        setLoading(true);
        const url = new URL(
            "https://example/products"
        );
  
        let params = {
            "query": term
        };
  
        Object.keys(params)
            .forEach(key =&gt; url.searchParams.append(key, params[key]));
  
        let headers = {
            "Accept": "application/json",
            "Content-Type": "application/json",
        };
  
        fetch(url, {
            method: "GET",
            headers: headers,
        })
            .then(response =&gt; response.json())
            .then(json =&gt; {
                setProducts(json); 
            });
  
    }
  
  
  
    useEffect(() =&gt; {
        fetchProducts(searchedProducts)
    }, [])
  
  
    return (
        {
          products.map(product =&gt; (
            &lt;div&gt;
              {product.name}
            &lt;/div&gt;
          ))
        }
    )
  }
  
  export default SearchPage</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Issues:</strong></p>
  <ul>
  <li>when the router changes to the (&quot;/searchPage&quot;) component state value get lost, meaning it returns to <strong>&quot;&quot;</strong> value. ?</li>
  <li>lesser problem, if the user sends an empty string (&quot; &quot;), and the <strong>API</strong> needs a value or it will give an error, what is the solution to that?</li>
  <li>is there a way of keeping the value after reloading the page?</li>
  </ul>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {createContext} from "react";
  
  export const LocaleContext = createContext(null);</code></pre>
  </div>
  </div>
  </p>
  <p>this is the <code>localeContext</code> component if needed.</p>