4.9 adding trees to for

Now that we understand state and events, we can keep evolving our application into a real expense tracker. Inside the components folder, create a new folder called NewExpense and put a file NewExpense.js in it. As usual, import React at the top and declare the component with an arrow function, exported by default.

import './NewExpense.css';

const NewExpense = () => {
  return (
    <div className="new-expense">
      <ExpenseForm />
    </div>
  );
};

export default NewExpense;

Next to it, add a NewExpense.css file and paste the provided CSS — that is what gives us the round Add Expense button look. Back inside NewExpense.js, replace any leftover <form> tag by a div with className="new-expense" wrapping the future form component.

The ExpenseForm component

• Create ExpenseForm.js inside the same NewExpense folder.
• Create the matching ExpenseForm.css right next to it and import it from the JS file.
• The component returns a form containing a div className="new-expense__controls" that wraps three labelled inputs — title (type="text"), amount (type="number") and date (type="date" with max="2022-05-25").
• Below the controls, add another div className="new-expense__actions" with a single <button type="submit">Add Expense</button>.

In NewExpense.js, import ExpenseForm from ./ExpenseForm and render <ExpenseForm /> inside the wrapper div. Finally, open App.js, import the new component with import NewExpense from './components/NewExpense/NewExpense'; and render <NewExpense /> in place of the previous h2 at the top of the returned JSX.

Save everything and reload the page in the browser: the form is now part of the application. It still looks rough — we'll polish it in the next lessons — but the layout is in place and ready to be wired with handlers.