过滤产品进入 搜索输入 ReactJS

Question

I have list of products. I want to display only products that have a description or name containing typed word by clicking enter on search input . So I tried this in my Search component

const Search = (props) => {
  return (
    <InputGroup className="container custom-input-group">
      <FontAwesomeIcon icon={faSearch} className="icon" />
      <FormControl
        placeholder="Search"
        type="text"
        className="mr-sm-2"
        onChange={(e) => props.onSearch(e.target.value)}
        value={props.value}
      />
    </InputGroup>
  );
};

And this in my App component

const App = (props) => {
  const [cartProducts, setCartProducts] = useState([]);
  const [products, setProducts] = useState(getProducts());

  const [searchValue, setSearchValue] = useState();

  const handleAddProductToCart = (productID) => {
    console.log(productID);
    setCartProducts([...cartProducts, productID]);
  };
  const handleRemoveFromCart = (productID) => {
    const newCartProducts = cartProducts.filter((id) => id !== productID);
    setCartProducts(newCartProducts);
  };

  const filterItems = ({ description, title }) => {
    return title.toLocaleLowerCase().indexOf(searchValue.toLocaleLowerCase())
      || description.toLocaleLowerCase().indexOf(searchValue.toLocaleLowerCase())
  }

  return (
    <>
      <Header />
      <Search onSearch={setSearchValue} value={searchValue} />
          {products.filter(filterItems).map((product, id) => (
      <Product key={product.id} {...product}/> 
       ))}
      <Sidebar />
      {products.map((product) => {
        const { id } = product;
        let haveInCart = false;

        cartProducts.forEach((productID) => {
          if (productID === id) {
            haveInCart = true;
          }
        });

        return (
          <Product
            key={product.id}
            product={product}
            handleAddProductToCart={handleAddProductToCart}
          />
        );
      })}
      <h2>Your Cart</h2>
      {cartProducts.length > 0
        ? cartProducts.map((productID) => {
            const productIndex = products.findIndex((product) => {
              return product.id === productID;
            });
            let product = products[productIndex];
            return (
              <CartProduct
                key={product.id}
                product={product}
                handleRemoveFromCart={handleRemoveFromCart}
                haveInCart={true}
              />
            );
          })
        : "Yor Cart is Empty :("}
    </>
  );
};

It's giving me SyntaxError. What am I doing wrong?

Code sandbox https://codesandbox.io/s/cat-toys-n23m6?file=/src/App.jsx:275-2222

EDIT I found I was missing ))} but it's still not working

Answer 1

Add an empty tag in your map function

{
  products.filter(filterItems).map((product, id) => (
    <>  {/* here */}
      <Product key={product.id} {...product}/> 
      <Sidebar />
      {
        products.map((product) => {
          const { id } = product;
          let haveInCart = false;
          cartProducts.forEach((productID) => {
            if (productID === id) {
              haveInCart = true;
            }
          });
          return (
            <Product
              key={product.id}
              product={product}
              handleAddProductToCart={handleAddProductToCart}
            />
          );
        })
      }
    </>  {/* here */}
))}

---

EDIT

I have made changes to your code. Now it's your turn;)

Demo: stackblitz

Answer 2

I forked your sandbox. Here's the code

return (
<>
  <Header />

  <Search onSearch={setSearchValue} value={searchValue} />

  {products.filter(filterItems).map((product, id) => (
    <div>
      <Product key={product.id} {...product} />

      <Sidebar />

      {products.map((product) => {
        const { id } = product;
        let haveInCart = false;

        cartProducts.forEach((productID) => {
          if (productID === id) {
            haveInCart = true;
          }
        });

        return (
          <Product
            key={product.id}
            product={product}
            handleAddProductToCart={handleAddProductToCart}
          />
        );
      })}

      <h2>Your Cart</h2>

      {cartProducts.length > 0
        ? cartProducts.map((productID) => {
            const productIndex = products.findIndex((product) => {
              return product.id === productID;
            });
            let product = products[productIndex];
            return (
              <CartProduct
                key={product.id}
                product={product}
                handleRemoveFromCart={handleRemoveFromCart}
                haveInCart={true}
              />
            );
          })
        : "Yor Cart is Empty :("}
    </div>
  ))}
</>
);