글씨 진하게

hi6724 · Dec 11, 2022 · dc8067f · dc8067f
1 parent f7c0e31
commit dc8067f
Showing 1 changed file with 24 additions and 15 deletions.
diff --git a/cars/src/components/CarList.js b/cars/src/components/CarList.js
@@ -4,26 +4,35 @@ import { removeCar } from "../store";
 
 function CarList() {
   const dispatch = useDispatch();
-  const cars = useSelector(({ cars: { data, searchTerm } }) =>
-    data.filter((car) =>
+  const { cars, name } = useSelector(({ form, cars: { data, searchTerm } }) => {
+    const filteredCars = data.filter((car) =>
       car.name.toLowerCase().includes(searchTerm?.toLowerCase())
-    )
-  );
+    );
+    return {
+      cars: filteredCars,
+      name: form.name,
+    };
+  });
   const handleCarDelete = (car) => {
-    console.log(car.id);
     dispatch(removeCar(car.id));
   };
 
-  const renderedCars = cars.map((car) => (
-    <div key={car.id} className="panel">
-      <p>
-        {car.name} - ${car.cost}
-      </p>
-      <button onClick={() => handleCarDelete(car)} className="button is-danger">
-        Delete
-      </button>
-    </div>
-  ));
+  const renderedCars = cars.map((car) => {
+    const bold = name && car.name.toLowerCase().includes(name.toLowerCase());
+    return (
+      <div key={car.id} className={`panel ${bold && "bold"}`}>
+        <p>
+          {car.name} - ${car.cost}
+        </p>
+        <button
+          onClick={() => handleCarDelete(car)}
+          className="button is-danger"
+        >
+          Delete
+        </button>
+      </div>
+    );
+  });
 
   return (
     <div className="car-list">