title: How can I send the state (useState) of one file component to another file's component?
body: <p>REACT.js:</p>
  <p>Let say I have a home page with a search bar, and the search bar is a separate component file i'm calling.</p>
  <p>The search bar file contains the useState, set to whatever the user selects. How do I pull that state from the search bar and give it to the original home page that
  SearchBar is called in?</p>
  <p>The SearchBar Code might look something like this..</p>
  <pre><code>import React, { useEffect, useState } from 'react'
  import {DropdownButton, Dropdown} from 'react-bootstrap';
  import axios from 'axios';
  const StateSearch = () =&gt;{
      const [states, setStates] = useState([])
      const [ stateChoice, setStateChoice] = useState(&quot;&quot;)
  
      useEffect (()=&gt;{
          getStates();
      },[])
  
      const getStates = async () =&gt; {
          let response = await axios.get('/states')
          setStates(response.data)
      }
  
      const populateDropdown = () =&gt; {
           return states.map((s)=&gt;{
              return (
                   &lt;Dropdown.Item as=&quot;button&quot; value={s.name}&gt;{s.name}&lt;/Dropdown.Item&gt;
               )
           })
      }
      const handleSubmit = (value) =&gt; {
          setStateChoice(value);
      }
      return (
          &lt;div&gt;
              &lt;DropdownButton
               onClick={(e) =&gt; handleSubmit(e.target.value)}
               id=&quot;state-dropdown-menu&quot; 
               title=&quot;States&quot;
               &gt;
                  {populateDropdown()}
              &lt;/DropdownButton&gt;
          &lt;/div&gt;
      )
  }
  
  export default StateSearch; 
  </code></pre>
  <p>and the home page looks like this</p>
  <pre><code>import React, { useContext, useState } from 'react'
  import RenderJson from '../components/RenderJson';
  import StateSearch from '../components/StateSearch';
  import { AuthContext } from '../providers/AuthProvider';
  
  const Home =  () =&gt; {
    const [stateChoice, setStateChoice] = useState('')
    const auth = useContext(AuthContext)
    console.log(stateChoice)
    return(
      &lt;div&gt;
        &lt;h1&gt;Welcome!&lt;/h1&gt;
        &lt;h2&gt; Hey there! Glad to see you. Please login to save a route to your prefered locations, or use the finder below to search for your State&lt;/h2&gt;
        &lt;StateSearch stateChoice={stateChoice} /&gt;
      &lt;/div&gt;
    )
  };
  
  export default Home;
  </code></pre>
  <p>As you can see, these are two separate files, how do i send the selection the user makes on the search bar as props to the original home page? (or send the state, either one)</p>