Posted on May 31, 2022

Week 6 - Sum Two Numbers App

Welcome to Week 6 of React Curve

Hello developer!, glad to see you again.

This is a react-curve, open source project where I can share and start creating small UI components in the way I understood the concepts to build large scale projects .

Sum Two Numbers App

This week we created a Sum Two Numbers app. The user enter two numbers in a form and result of the summation is shown in react.

To create a SumTwoNum component; We have to :

Create two states that hold the value of each number.
Create a state that holds the summation value with an initial value equal to zero.
Create a calculate function that calculates and updates the summation.
Create two inputs and handle events for each number.
onClick submit button, calculate method is fired and do summation.

Code

import React, {useState} from 'react'; const SumTwoNum = () => { const [number1, setNumber1] = useState(); const [number2, setNumber2] = useState(); const [summation, setSummation] = useState(0); function calculate() { setSummation(number1 + number2); } return ( <div> <h2>Sum Two Numbers</h2> <input placeholder="First Number" type="number" value={number1} onChange={(ev) => setNumber1(+ev.target.value)} /> <input placeholder="Second Number" type="number" value={number2} onChange={(ev) => setNumber2(+ev.target.value)} /> <br /> <button onClick={calculate}>Sum Two Numbers</button> <p>Summation : {summation || "0"}</p> </div> ); } export default SumTwoNum;