How can I send the state (useState) of one file component to another file's component?-CodePudding

REACT.js:

Let say I have a home page with a search bar, and the search bar is a separate component file i'm calling.

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?

The SearchBar Code might look something like this..

import React, { useEffect, useState } from 'react'
import {DropdownButton, Dropdown} from 'react-bootstrap';
import axios from 'axios';
const StateSearch = () =>{
    const [states, setStates] = useState([])
    const [ stateChoice, setStateChoice] = useState("")

    useEffect (()=>{
        getStates();
    },[])

    const getStates = async () => {
        let response = await axios.get('/states')
        setStates(response.data)
    }

    const populateDropdown = () => {
         return states.map((s)=>{
            return (
                 <Dropdown.Item as="button" value={s.name}>{s.name}</Dropdown.Item>
             )
         })
    }
    const handleSubmit = (value) => {
        setStateChoice(value);
    }
    return (
        <div>
            <DropdownButton
             onClick={(e) => handleSubmit(e.target.value)}
             id="state-dropdown-menu" 
             title="States"
             >
                {populateDropdown()}
            </DropdownButton>
        </div>
    )
}

export default StateSearch;

and the home page looks like this

import React, { useContext, useState } from 'react'
import RenderJson from '../components/RenderJson';
import StateSearch from '../components/StateSearch';
import { AuthContext } from '../providers/AuthProvider';

const Home =  () => {
  const [stateChoice, setStateChoice] = useState('')
  const auth = useContext(AuthContext)
  console.log(stateChoice)
  return(
    <div>
      <h1>Welcome!</h1>
      <h2> 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</h2>
      <StateSearch stateChoice={stateChoice} />
    </div>
  )
};

export default Home;

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)

CodePudding user response：

You just need to pass one callback into your child.

Homepage

<StateSearch stateChoice={stateChoice} sendSearchResult={value => {
   // Your Selected value
}} />

Search bar

const StateSearch = ({ sendSearchResult }) => {

..... // Remaining Code

const handleSubmit = (value) => {
   setStateChoice(value);
   sendSearchResult(value);
}

CodePudding user response：

You can lift the state up with function you pass via props.

const Home = () => {

  const getChoice = (choice) => {
    console.log(choice);
  } 

  return <StateSearch stateChoice={stateChoice} giveChoice={getChoice} />
}

const StateSearch = (props) => {
  const handleSubmit = (value) => {
    props.giveChoice(value);
  }

  // Remaining code ...
}

Actually there is no need to have stateChoice state in StateSearch component if you are just sending the value up.