Udemy Props / 합성

const expenseDate = new Date(2023, 6, 13);

return <div>{expenseDate.toISOString()}</div>

// app.js
import ExpenseItem from "./components/ExpenseItem";

function App() {
  const expenses = [
    {
      title: "New Desk (Wooden)",
      amount: 204.09,
      date: new Date(2023, 6, 13),
    },
    {
      title: "Car Insurance",
      amount: 294.67,
      date: new Date(2023, 6, 13),
    },
    {
      title: "Pizza",
      amount: 14.65,
      date: new Date(2023, 6, 13),
    },
  ];
  return (
    <div>
      <h2>Let's get started!</h2>
      <ExpenseItem
        title={expenses[0].title}
        amount={expenses[0].amount}
        date={expenses[0].date}
      />
      <ExpenseItem
        title={expenses[1].title}
        amount={expenses[1].amount}
        date={expenses[1].date}
      />
      <ExpenseItem
        title={expenses[2].title}
        amount={expenses[2].amount}
        date={expenses[2].date}
      />
    </div>
  );
}

export default App;

//ExpenseItem.js
import "./ExpenseItem.css";

function ExpenseItem(props) {
  return (
    <div className="expense-item">
      <div>{props.date.toISOString()}</div>
      <h2>{props.title}</h2>
      <div className="expense-item__description">
        <div className="expense-item__price">{props.amount}</div>
      </div>
    </div>
  );
}

export default ExpenseItem;