77. 조건 명령문 반환 추가하기

ExpenseList.js 를 생성해서

조건 명령문에 따른 코드를 따로 구분했다

ExpenseList.js

import ExpenseItem from './ExpenseItem';
import './ExpenseList.css';

const ExpenseList = (props) => {

  let expensesContent = <p>No expenses found.</p>;
  if (props.items.length === 0) {
    return <h2 className='expenses-list__fallback'>Found no expenses.</h2>
  }

  return <ul className='expenses-list'>
    {
      props.items.map((expense) => (
        <ExpenseItem key={expense.id} title={expense.title} amount={expense.amount} date={expense.date} id={expense.id} />
      ))
    }
  </ul>
}

export default ExpenseList;

 

Expenses.js

import ExpensesFilter from "./ExpensesFilter";
import ExpenseList from "./ExpenseList";
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);
  }

  const filteredList = props.items.filter(item => item.date.getFullYear() === Number(filteredYear));

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

export default Expenses;