使用输入搜索字段 ReactJS 添加搜索功能 state

Question

I have made a ReactJS application to display the items from a restaurant menu by making use of an API.

My API data is in this way:

[
  {
   "Name": "Chicken pizza",
   "Category": "Pizza",
   "Type": "non-veg",
   "Price": 376,
   "id": "1"
  },
  {
   "Name": "Paneer Cheese Pizza",
   "Category": "Pizza",
   "Type": "veg",
   "Price": 350,
   "id": "2"
  }
]

So to display the above data from my API I have made use of map function in this way

{filteredData.map((item) => (
      <div>
        <div className="items" key={item.id}>
          <ul>
            <li className={item.Type === "veg" ? "veg" : "non-veg"}></li>
            <li>{item.Name}</li>
            <li>₹ {item.Price}</li>
            <img src="/images/pizza1.jpg" />
            <div className="hr"></div>
          </ul>
        </div>
      </div>
    ))}

Now I have tried adding an input search box with a state like this to filter the list of items on the page

state:

const [search, setSearch] = useState();

search input:

<input type="text" className="search-input" placeholder="Search for dishes"  value={search} onChange={(e)=>setSearch(e.target.value)}/>

Later I have changed my map function to filter data from search in this way below

{filteredData.filter(item=>item.Name.toLowerCase().includes(search.toLowerCase())).map(item=>
   <div>
    <div className='items' key={item.id}>
      <ul>
        <li className={item.Type === 'veg' ? 'veg' : 'non-veg'}></li>
        <li>{item.Name}</li>
        <li>₹ {item.Price}</li>
        <img src='/images/pizza1.jpg'/>
        <div className='hr'></div>
      </ul>
     </div>
    </div>
)}

I think I've been making some mistake around the map function but couldn't figure out what to change and make my code work.

Guide me of how I can make changes in my code to achieve the search functionality on my react application.

Share me whatever the idea you feel like would be helpful for me to correct the code and add the search functionality to filter the items.

I'll give my sandbox link down below for further information if you need any regarding the code.

https://codesandbox.io/s/upbeat-bartik-8jpc2r?file=/src/App.js

I tried adding a state to input search field and made changes on the map function to reflect the search field input on the data given by the user.

this is my state

const [search, setSearch] = useState();

this is my search field input

<input type="text" className="search-input" placeholder="Search for dishes"  value={search} onChange={(e)=>setSearch(e.target.value)}/>

and this is the change I made on the map function

.filter(item=>item.Name.toLowerCase().includes(search.toLowerCase()))

Answer 1

I think the issue is that you're filtering the array even if search is undefined or an empty string.

I believe something like this should achieve the desired result:

// Check if search is "truthy"
(search ?
    // Filter the filteredData array by the search value
    filteredData.filter((item) =>
        item.Name.toLowerCase().includes(search.toLowerCase())
    ) :
    // Otherwise use the unmodified filteredData array
    filteredData
).map((item) => // Continue the map function