Question 53886 in Javascript Question posted in
A very good W3school tutorial can be found here.

passing searched from search input to another component to be displayed – Javascript

i am really stuck on how i can pass searched data which a user types from my search bar in the header component to the main component to be displayed.

Currently if i place a search bar in my main component, it searches very well and data is displayed but for my case i want to search from the header component.

I have seen some solutions on stack overflow but i have failed to come up with a solution.

Below is what i have tried:

//implementing search icon
<Search
  placeholder="Search..."
  allowClear
  size="large"
  style={{
    paddingTop: "14px",
  }}
  onSearch={(value) => {
    setSearchedText(value)
  }}
  searchedText={searchedText}
/>

Below is my main component where i want the data to be displayed

const Home = (props) => {
    const navigate = useNavigate();
    const [items, setItems] = useState([])
    const [IsLoading, setIsLoading] = useState(true)

    useEffect(() => {
        let path = `api/v1/homes?query=${props.searchedText}`
        axios.get(path)
            .then(res => {
                console.log(res)
                setItems(res.data)
                setIsLoading(false);
            })
            .catch(err => {
                setIsLoading(false);
                console.log(err)
            })
    }, [searchedText])

I have removed some code to make it somehow tidy

Tags:

2

Answers


  1. 0

    I think you should be looking for state management libraries like Redux, Recoil, etc.

    Recoil is good for beginners since it’s easy to learn, https://recoiljs.org/docs/introduction/getting-started/

    or useContext for less library usage. https://dev.to/hey_yogini/usecontext-for-better-state-management-51hi

    I really want to write a code for you, but it actually does not help at all.
    You should learn on your own 🙂

    Login or Signup to reply.
  2. 0

    You need a common parent component that will keep track of searchText and will pass it to the Home component to display.

    const Parent = () => {
   const [searchText, setSearchText] = useState('')

   return (
      <>
         <Search searchText={searchText} setSearchText={setSearchText} />
         <Home searchText={searchText} />
      </>
   )
}

    <Search /> will then use props.searchText and props.setSearchText and <Home /> will use props.searchText.

    This has to do with the unidirectional dataflow that Reach is based. There are essentially two main ways a components keeps track of it’s data – via state and props. When either state or props changes the component re-renders to display new data. state can be set from within the component (using useState hook for example) and props is passed to the component from it’s parent. We use can pass callbacks from a parent to its children allow children to update parent’s state. This means you cannot pass data directly between siblings, so you need a common parent.

    There are other alternatives like Context and Redux, but they all essentially use the same approach under the hood.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search