72. 연습하기 : Lists 다루기 (문제)

과제: 연습해봅시다: 목록(List) 작업하기

 

힌트 

filter 메서드를 이용해서 배열을 filtering 하기

너무 복잡하게 생각하지 말고 expense 전체 배열을 변경할 필요가 없다
expense 배열을 기반으로 새로운 배열을 도출할 수 있다

 

간단하게 filter를 이용해서 date의 year 값을 얻어내 비교해서 새로운 배열을 만들었다

 

Expense.js 

import ExpenseItem from "./ExpenseItem";
import ExpensesFilter from "./ExpensesFilter";
import Card from "../UI/Card";
import { useState } from 'react';
import "./Expenses.css";
function Expenses(props) {
  const [filteredYear, setFilteredYear] = useState('2023');

  const filterChangeHandler = (selectedYear) => {
    setFilteredYear(selectedYear);
  }

  console.log("filtered", filteredYear);
  const filteredList = props.items.filter(item => item.date.getFullYear() === Number(filteredYear));

  return <Card className="expenses">
    <ExpensesFilter selected={props.selected} onChangeFilter={filterChangeHandler} />

    {filteredList.map((expense) => <ExpenseItem key={expense.id} title={expense.title} amount={expense.amount} date={expense.date} id={expense.id} />)}
    {/* {props.items.map((expense) => <ExpenseItem key={expense.id} title={expense.title} amount={expense.amount} date={expense.date} id={expense.id} />)} */}

  </Card>
}

export default Expenses;