Question

0

137

Visualizações

is there a way of passing the cars component as the search result from the search inputs in React.js?

This is the code for my search component, it contains the search input that returns a search result

function Search (props) {
const [search, setSearch] = useState("")
 function handleSearch(e){
   setSearch(e.target.value)
 };
      const filtered = !search
    ? data
    : data.filter((car) =>
        car.name.toLowerCase().includes(search.toLowerCase())
      );
    
  return(
    <>
    <div className="search-container">
    <input 
    value={search}
    onChange={handleSearch}
    className="searchbox"
    type='text'
    placeholder="Find a car.."/>
    </div>     
    </>  
  )
}

this is my CARS COMPONENT it shows the the collective lists of cars from my data

function Cars (){
    
  return(
    <> 
   
    <div className="cars-container">
     {data.map((car) =>{
      return (
       <div className="cars-wrapper"
           key={car.number}>         
          <img className='car-image' 
          src={car.image} alt="mercedez" />
          <h4>{car.name}</h4>
          <p>{car.model}</p> 
        <Link style={{fontSize: '1rem'}}
        to={`/cars/${car.number}`}>Mind blowing features</Link> 
       </div>
      )
     })}
   
      </div> 
   <Outlet />       
   </>
  )
    }


     export {Cars}

Now my question is, how can i pass the CARS component to the SEARCH component to be displayed whenever the search input is used to search for a car.

about 4 years ago · Juan Pablo Isaza

1 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Answer 1 · 2022-07-04T06:49:13.546Z

Okay, there are several ways to do this.

You can create a parent element in which you declare a state, for example filtered, which you will pass to searchComponent where it will change, and in carComponent you will pass the already filtered state:

Like this:

 const Parent () => {
   const [filtered, setFiltered] = useState('');
   const handleFilter = (data) => {
          setFiltered(data)
   }
        
   return (<>
     <Search setFiltered={handleFilter}/>
     <Cars data={filtered}/>
   </>)
}

You can create custom hooks with state, put them in a separate file, and use their state where you want, although I'm not entirely sure about this approach, because. I myself have been using more advanced methods for a long time.

That's about custom hooks: https://reactjs.org/docs/hooks-custom.html

Use libraries for state management like MobX or Redux

0

137

is there a way of passing the cars component as the search result from the search inputs in React.js?

1 Respostas

0

Encontrar trabalhos remotos

Andres GPT