Build a Calculator App using React JS | React Beginner Project

In this video, we will explain How to Build a calculator app using React JS. This calculator app will perform all four operations (Add, Subtract, Multiplication, and Divide).

[vibha]

After years of findind perfect calculator tutorial, this is the most simple and easy to understand video. Thank you for your efforts ❤

[sriharshitha]

instead of typing the function in each button just add seperate function like=function displayName(event) {
const clickedValue = event.target.value;
setValue(prevValue => prevValue + clickedValue);
} and add onClick={displayName} to the required buttons
it saves time

[nadicadizdarevic]

Everything is clear and simple. Thanks.

[azhrsk]

After calculation when we click the DEL button then error occurs as ( TypeError: value.slice is not a function)

[HaniyaSahar-mi]

this is 5% react and 95% javascript with a lot of errors in it.
Please upgrade it

[ZainabMustaqeem-wz]

onClick={e => setValue(value + e.target.value)} sir isme value pr error araha he target ke bad

[sethuraman]

+, /, -, buttons are not working...when will I touch those buttons all the values are deleted.

[Findme-cksy]

We shouldn't use eval() as it's not secure

[PrinceSoniOFFICIAL]

Good bro but if make more 5 min video for unwanted result secure it would be more helpful.

[trading-infinity-]

bro how the calculator work with keyboard button

[nikhilkumarjamwal]

i thought you built it from the scratch but used eval() isntead.

[Ijazkhanmayo]

please use split screen so that coding and its effect at the same time

[maximilianoacuna]

hello, the video is very very good, i would like fix some problems in the code, here code refactorized:

import { useState } from "react";

export default function Botons() {
const [value, setValue] = useState("")

const reset = () =>{
setValue("")
}

const back = () =>{
setValue(value.slice(0, -1))
}

const evalueExpresion = () => {
try{
const evaluar = eval(value)
setValue(evaluar.toString())
}catch(error){
`error: ${console.log(error)}`
}
}

return (
<>
<input
type="text"
name="display"
value={value}
onClick={(e) => setValue(value + e.target.value)}
/>

<button value="1" onClick={e => setValue(value + e.target.value)}>1</button>

<button value="2" onClick={e => setValue(value + e.target.value)}>2</button>

<button value="3" onClick={e => setValue(value + e.target.value)}>3</button>

<button value="/" onClick={e => setValue(value + e.target.value)}>/</button>

<button value="4" onClick={e => setValue(value + e.target.value)}>4</button>

<button value="5" onClick={e => setValue(value + e.target.value)}>5</button>

<button value="6" onClick={e => setValue(value + e.target.value)}>6</button>

<button value="*" onClick={e => setValue(value + e.target.value)}>*</button>

<button value="7" onClick={e => setValue(value + e.target.value)}>7</button>

<button value="8" onClick={e => setValue(value + e.target.value)}>8</button>

<button value="9" onClick={e => setValue(value + e.target.value)}>9</button>

<button value="+" onClick={e => setValue(value + e.target.value)}>+</button>

<button value="0" onClick={e => setValue(value + e.target.value)}>0</button>

<button value="." onClick={e => setValue(value + e.target.value)}>.</button>

<button value="Reset" onClick={reset}>R</button>

<button value="Back" onClick={back}>Back</button>

<button value="-" onClick={e => setValue(value + e.target.value)}>-</button>

<button value="="
</>
);
} thanks for the video <3

[StudindSystem-ldvm]

bro improve your speech on english to become best youtuber 👍

[sing_with_nitin]

brothers source code bhi dedete description me review kr leta