Home React JS How to add two numbers in ReactJS

How to add two numbers in ReactJS

2 min read
0
0
1,000

In this tutorials will teach How to add two numbers in ReactJS.

Create the folder which name is components inside the components folder  create the file AddNumbers.js file.

AddNumbers.js

import { useState } from "react";


function AddNumber() {

    const [num1, setNum1] = useState();
    const [num2, setNum2] = useState();
    const [tot, setTot] =  useState(); // take tot in a state


function handleClick()
{
  setTot(Number(num1) + Number(num2)); // set number to the state
}

    return (
      <div>
         
        <h1>Add Two Numbers</h1>

        <label>Number 1</label>
        <input type="text" name="num1" class="form-control" onChange={(event) =>
                {
                  setNum1(event.target.value);      
                }}>
        </input>
        <label>Number 2</label>
        <input type="text" name="num2"  class="form-control" onChange={(event) =>
                {
                  setNum2(event.target.value);      
                }}>
         </input> 
         <label>Total</label>

        <input type="text"   class="form-control" value={ tot }></input>   
    
        <button onClick={handleClick}  class="btn btn-warning mt-4"> Click Me</button>
      </div>

            
        
    );
            
}
  export default AddNumber;

Install the Bootstrap in React

npm i react-bootstrap

In order to run the app the call the components in side the App.js

App.js

import AddNumber from './components/AddNumber';
import "./App.css"
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {


  return (
    <div className='App'>
          <AddNumber />
       
    </div>
       
        
      
  );
}

i have attached the video link below. which will do this tutorials step by step

 

    Load More Related Articles
    Load More By admin
    Load More In React JS

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Check Also

    Laravel 11 CRUD Mastering RESTful API MVC with Repository Pattern

    In this tutorial will teach Laravel 11 Api MVC with Repository Pattern Crud Application st…