DEV Community

Cover image for Week 6 - Sum Two Numbers App
Mohamed Khaled Yousef
Mohamed Khaled Yousef

Posted on

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

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.


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 (

            <h2>Sum Two Numbers</h2>
                placeholder="First Number"
                onChange={(ev) => setNumber1(}
                placeholder="Second Number"
                onChange={(ev) => setNumber2(}
            <br />
            <button onClick={calculate}>Sum Two Numbers</button>
            <p>Summation  : {summation || "0"}</p> 

export default SumTwoNum;

Enter fullscreen mode Exit fullscreen mode


Thank you for reading and any contribution is more than welcome in the threads below!

Live Preview
Source Code

Top comments (0)