I am trying to simple search bar that on input returns the result according to the input keyword:

But the code below doesn't seem to work, nothing is happening when I am searching something in the search bar, also the console is throwing this error "Warning: Each child in a list should have a unique "key" prop. Check the render method of Search."

I am a newbie, don't know much, any help would be appreciated, also the reason I have put item.name and item.headline in separate divs is because I want to show the content in grid format, so also tell me if I am doing that wrong, and what could have been done?

repo link is here

const Search = () => {
  const [ads, setAds] = useState([])

  useEffect(() => {
    getAds()
  }, [])

  const getAds = async () => {
    let result = await fetch("http://localhost:5000/ads")
    result = await result.json()
    setAds(result)
  } 

  const InputHandle = async (event) => {
    let key = event.target.value
    if(key){
      let result = await fetch(`http://localhost:5000/ads/${key}`)
      result=await result.json()
      setAds(result)
    
    } else{
      getAds()
    }
    
  }

  return (
    <div className="ads-list">
    
      <input type="" className="searchadsbox" placeholder="Search Ads" onChange={InputHandle} />
      {/* <Search style={{ color: "gray", fontSize: 16 }} /> */}
      {
        ads.map((item)=>
        <ul> 
          
        <div className="adtitle">{item.name}</div> 
        <div> {item.headline} </div>
        
      </ul>
        )
      }
    
    
    </div>

CodePudding user response：

First of all about the warning you should add a key attribute that should be a unique string to your parent element which is in your map loop like below:

items.map((item) => <div key={item.id}>...</div> )

Then your DOM is incorrect first that the ul element should have directly li not div element directly! and you should create your map loop for your lis not for whole the ul

<ul> 
{
        ads.map((item)=>
          
        <li key={item.id}>
           <div className="adtitle">{item.name}</div> 
        <div> {item.headline} </div>
        </li>
        
        )
      }
      </ul>

and change these lines like below:

const [result, setResult]= useState([])

const getAds = async () => {
    let result = await fetch("http://localhost:5000/ads")
    result = await result.json()
    setAds([...result])
  } 

  const InputHandle = async (event) => {
    if(adds.length){
     const res = adds.filter((item) => // search condition)
     setResult([...res])
}
    
  }

and if you wanna show your result in your map loop so you should replace adds.map with result.map