title: passing multiple value to function defined in contextFunction to update context variable in react
body: <p>I am new to CONTEXT-API. I was building an application where I have some data after fetching it from an API. I used a context-API to update data globally. I did it successfully. My next task was to filter data as the user type something in the input field. For that, I created two functional components.</p>
  <p>1st functional component contains a search field and 2nd component contains a body where all data will be displayed.</p>
  <p>Now I want to filter the data and update the context array accordingly so that every child component will get filtered data. And here I am just confused about how to pass a variable to a function that is defined in the stationProvider.JSX file to update the CONTEXT variable each time the input variable changes. Here I didn't add that function to avoid confusion.</p>
  <p>I would love any suggestion.</p>
  <p>Link of file <a href="https://github.com/unknownBalak/radioapp/blob/master/src/component/StationProvider.jsx" rel="nofollow noreferrer">stationProvider.jsx</a>. and Link from where I want to pass variable is <a href="https://github.com/unknownBalak/radioapp/blob/master/src/component/Search.jsx" rel="nofollow noreferrer">Search.jsx</a>. Please help me regarding this.</p>
  <pre><code>               StationProvider.jsx File
  
   export const StationContext = createContext();
  
  export const StationProvider = (props) =&gt; {
  const [data, setData] = useState([]);
  useEffect(() =&gt; {
  main.then((res) =&gt; {
    setData([...res]);
       });
     }, []);
  return (
    &lt;StationContext.Provider value={data}&gt;{props.children} 
    &lt;/StationContext.Provider&gt;
   );
  };
  
  
  
  
  
             Search.jsx file
  
     function Search() {
     const [value, setValue] = useState(&quot;noFilter&quot;);
     const [input, setInput] = useState(&quot;&quot;);
  
     return (
          &lt;div className=&quot;searchBar&quot;&gt;
         &lt;div className=&quot;childContainer&quot; ref={floatDiv}&gt;
           &lt;h1&gt;Filter BY: &lt;/h1&gt;
         &lt;div className=&quot;tagName&quot;&gt;
          &lt;label htmlFor=&quot;drowpdown&quot;&gt; Select from DrowpDown: &lt;/label&gt;
          &lt;select id=&quot;dropdown&quot; onChange={(e) =&gt; setValue(e.target.value)} 
              required&gt;
          &lt;option value=&quot;noFilter&quot;&gt; No Filter &lt;/option&gt;
          &lt;option value=&quot;country&quot;&gt;Country &lt;/option&gt;
          &lt;option value=&quot;state&quot;&gt; State &lt;/option&gt;
          &lt;option value=&quot;tag&quot;&gt;Tag name &lt;/option&gt;
          &lt;option value=&quot;station&quot;&gt;Station Name &lt;/option&gt;
        &lt;/select&gt;
        &lt;input
          type=&quot;text&quot;
          className={value !== &quot;noFilter&quot; ? &quot;active&quot; : &quot;&quot;}
          placeholder=&quot;Enter value name&quot;
          onChange={(e) =&gt; setInput(e.target.value)}
        /&gt;
      &lt;/div&gt;
      &lt;h3 style={{ color: &quot;black&quot; }}&gt;
        &lt;span className=&quot;warning&quot;&gt; Note: &lt;/span&gt; Working on filtering{&quot; &quot;}
         &lt;/h3&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   );
   }
    export default Search;
  </code></pre>
  <p>Thanks in advance</p>