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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 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
1 | npm i react-bootstrap |
In order to run the app the call the components in side the App.js
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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
