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
