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
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.
Code
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 (
<div>
<h2>Sum Two Numbers</h2>
<input
placeholder="First Number"
type="number"
value={number1}
onChange={(ev) => setNumber1(+ev.target.value)}
/>
<input
placeholder="Second Number"
type="number"
value={number2}
onChange={(ev) => setNumber2(+ev.target.value)}
/>
<br />
<button onClick={calculate}>Sum Two Numbers</button>
<p>Summation : {summation || "0"}</p>
</div>
);
}
export default SumTwoNum;
Conclusion
Thank you for reading and any contribution is more than welcome in the threads below!
Top comments (0)