[React] redux - useSelector로 여러 value 반환하기

textInput의 name value를 포함하는 car.name이 있으면 bold 처리해주기

 

 

useSelecter에서 cars와 name을 같이 반환하도록 한다 (10행)

import {useSelector, useDispatch} from 'react-redux';
import { removeCar } from '../store';

function CarList(){
    const dispath = useDispatch();
    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) => {
        dispath(removeCar(car.id));
    }
    const renderCars = cars.map((car) => {        
        //decide if this car should be bold
        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
                className='button is-danger'
                onClick={() => handleCarDelete(car)}>
                Delete
            </button>
        </div>
        )
    });    
   
    return <div className='car-list'>{renderCars}<hr/></div>
}

export default CarList;