如何使用 React-Redux 制作搜索栏？

Question

So guys, I have this component:

const Iphone = ({phones,searchQuery}) => {

  const filterIphone = phones.map((p, index) => 
    (<div className="model" key={index}>
      <NavLink to={'/p/' + p.id}>{p.body.model}</NavLink>
    </div>
  ))

  return (
    <div>
      {filterIphone}
    </div>
  );
};

export default Iphone;

phones - array with objects using which I return model( title of phones) from an object.

searchQuery - value which i get from input. (from Redux)

So, I want to make Search Bar, but I don't know how in this situatuon i can filter " filterIphone " beause i have used map before. I need to make function which filters my titles (model).

Answer 1

Try this,

const phones = searchQuery && searchQuery.trim().length ? phones.filter(p => {
  if(p && p.body && p.body.model && p.body.model.toLowerCase().includes(searchQuery.toLowerCase())){
    return p
  }
}) : phones

#const filterIphone = ......