CODEWITHSUNDEEP
javascriptreactjsreact-props
Alex Patient
Alex Patient

Reputation: 33

How to pass props onClick from one component to another in React JS

I have a component which gathers an array of ingredients from a user input.
I am trying to send this state array as props to another component, onclick, when I click a 'search' button.
However, I cannot get the props to pass and don't know what to do.

SearchBar component:

import React, { useState, useEffect } from 'react'
import MultiSearch from '../MultiSearch';

const SearchBar = () => {
  const [ingredients, setIngredients] = useState([])
  const [filteredData, setFilteredData] = useState([])
  
  const [fetchData, setFetchData] = useState([])

  const searchWordInput = document.querySelector('#search-word')


  const handleFilter = (e) => {
    const searchWord = e.target.value
    const newFilter = ingredients.filter((value) => {
      return value.strIngredient1.toLowerCase().includes(searchWord.toLowerCase())
    })
    if (searchWord === "") {
      setFilteredData([])
    } else {
    setFilteredData(newFilter)
    }
  } 


  useEffect(() => {
      fetch("https://www.thecocktaildb.com/api/json/v2/9973533/list.php?i=list")
      .then((resp) => resp.json())
      .then((data) => {
          setIngredients(data.drinks)
      })
  }, [])

  const handleIngredientSelect = (e) => {
    const selected = e.target.textContent
    searchWordInput.value = selected
  }

  const handleAddIngredient = () => {
    setIngredientsSelected([...ingredientsSelected, searchWordInput.value])
    console.log(ingredientsSelected)
    searchWordInput.value = ""
  }

  const passIngredients = (ingredientsSelected) => {
      <MultiSearch ingredients={ingredientsSelected} />
      console.log('Searched!')
  }
console.log(ingredientsSelected)
  return (
    <div className="search">
    <div className="searchInputs">
        <input id="search-word" type="text" placeholder='Enter ingredient' onInput={handleFilter} />
        <input onClick={handleAddIngredient} type="button" value="add ingredient" id="submit-btn"/>
        <input onClick={passIngredients} type="submit" value="search!"/>
        <div className="searchIcon"> 
        </div>    
    </div>
    {filteredData.length !== 0 && (
    <div className="dataResult">
      {filteredData.map((value, key) => {;    
                return (
                    <div key={key} className='dataItem'>
                        <p onClick={handleIngredientSelect} id="ingredient">{value.strIngredient1} </p> 
                    </div>
                );
            })}  
    </div>
)}
</div>
  )
}

export default SearchBar

Page which renders the two components: 
import React from 'react'
import MultiSearch from '../../components/MultiSearch'
import SearchBar from '../../components/SearchBar'

function Search() {
  return (
    <>
        <SearchBar />
        <MultiSearch />
    </>
  )
}

export default Search

Component to receive the props:

function MultiSearch(ingredients) {
    console.log(ingredients)

etc... the props never get logged

Upvotes: 0

Views: 1766

Answers (1)

Bart Krakowski
Bart Krakowski

Reputation: 1670

You would have to move your state to the parent component of both child components.

import React from 'react'
import MultiSearch from '../../components/MultiSearch'
import SearchBar from '../../components/SearchBar'

function Search() {
  const [ingredients, setIngredients] = useState()

  return (
    <>
        <SearchBar setIngredients={setIngredients} />
        <MultiSearch ingredients={ingredients} />
    </>
  )
}

Upvotes: 1

Related Questions