4. Working with Events & State

Activity 4.1: Building a Simple Calculator

In this activity, you'll build a very basic calculator that allows users to add, subtract, multiply, and divide two numbers with each other.

Perform the following steps to complete this activity:

1. Add four new components into an src/components folder in a new React project: Add.js, Subtract.js, Divide.js, and Multiply.js (also add appropriately named component functions inside the component files).
2. Add the following code to Add.js:

   function Add() {
     function changeFirstNumberHandler(event) {
       
     }
     function changeSecondNumberHandler(event) {
       
     }
     return (
       <p>
         <input type="number" onChange={changeFirstNumberHandler} /> + 
         <input type="number" onChange={changeSecondNumberHandler} /> = ...
       </p>
     );
   }
   export default Add;

This component outputs a paragraph that contains two input elements (for the two numbers...