Add Two Numbers in React Js
![Add Two Numbers in React Js](https://www.sarkarinaukriexams.com/images/post/1696335210React_Js_Add_Two_Number.png)
Learn how to add two numbers in React JS, a popular JavaScript library for building user interfaces. You will see how to perform addition of two numbers in React JS using both class and functional components. You will also learn how to add two numbers in JavaScript, the core language of React JS. This tutorial will help you master the basics of adding numbers in React JS and JavaScript.
![Profile Photo](https://fontawesomeicons.com/images/abhishek.png)
![Profile Photo](https://fontawesomeicons.com/images/anil.png)
![Profile Photo](https://fontawesomeicons.com/images/calendar2.png)
![Feedback Image](https://www.sarkarinaukriexams.com/images/editor/1709103057contribution.png)
Thanks for your feedback!
Your contributions will help us to improve service.
How to Add Two Numbers in React Js?
React Js Add Two numbers:In React.js, you can create a component to add two numbers by first defining input fields for the numbers. Users can input values, and the component can maintain state to store these values. Then, you can create a function that calculates the sum based on the input values. When the user triggers an event, such as clicking a button, the function can be called, and the result can be displayed using JSX. This allows for dynamic addition of two numbers in a React.js application.
React Js Add Two numbers Example
<script type="text/babel">
const { useState} = React;
function App() {
const [num1, setNum1] = useState(10);
const [num2, setNum2] = useState(23);
const [result, setResult] = useState(0);
const handleNum1Change = (event) => {
setNum1(Number(event.target.value));
};
const handleNum2Change = (event) => {
setNum2(Number(event.target.value));
};
const handleAddition = () => {
setResult(num1 + num2);
};
return (
<div className="container">
<h3 className="title">React Js Add Two Numbers</h3>
<input
type="number"
className="input"
value={num1}
onChange={handleNum1Change}
/>
<input
type="number"
className="input"
value={num2}
onChange={handleNum2Change}
/>
<button className="button" onClick={handleAddition}>
Add
</button>
<p className="result">Result: {result}</p>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
Output of React Js Add Two numbers
How do you implement real-time addition of three user-entered numbers in a Reactjs component?
This React.js code creates a simple web application that allows users to input three numbers and calculates their sum. It uses React's useState hook to manage state. Initially, three numbers (num1, num2, num3) are set to default values. When users input new values in the number fields, the handleNumChange function updates the corresponding state. Upon clicking the "Calculate Sum" button, the calculateSum function computes the sum of these numbers and updates the 'sum' state. The UI displays input fields for the three numbers, a button to trigger the calculation, and the resulting sum. This code demonstrates a basic React application for adding three numbers.
React Js Add Three Numbers Example
<script type="text/babel">
const { useState } = React;
function App() {
// Step 1: Create a state variable for numbers
const [numbers, setNumbers] = useState({
num1: 34,
num2: 45,
num3: 67,
});
const { num1, num2, num3 } = numbers;
// Step 2: Create a state variable for the sum
const [sum, setSum] = useState(0);
// Step 3: Create a function to handle input changes
const handleNumChange = (e, fieldName) => {
const newValue = parseInt(e.target.value, 10);
setNumbers({ ...numbers, [fieldName]: newValue });
};
// Step 4: Calculate the sum
const calculateSum = () => {
const result = num1 + num2 + num3;
setSum(result);
};
return (
<div className='container'>
<h1 className='title'>React Js Add Three Numbers</h1>
<input type="number" className='input' placeholder="Number 1" value={num1} onChange={(e) => handleNumChange(e, 'num1')} />
<input type="number" className='input' placeholder="Number 2" value={num2} onChange={(e) => handleNumChange(e, 'num2')} />
<input type="number" className='input' placeholder="Number 3" value={num3} onChange={(e) => handleNumChange(e, 'num3')} />
<button className='calculate-button' onClick={calculateSum}>Calculate Sum</button>
<p className='sum-text'>Sum: {sum}</p>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
</script>
Output of React Js Add Three Numbers Example
Javascript Program to Add Two Numbers using textbox
If you want to learn how to add two numbers in JavaScript. In this article, you will find out how to write a simple JavaScript code to add two numbers using different methods. You will also learn how to use a textbox to get the input from the user and display the result on the web page. Whether you are a beginner or an expert, this article will help you master the basics of adding two numbers in JavaScript
Add Two Numbers in Javascript
<script>
function addNumbers() {
// Get values from textboxes
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
// Check if the input is valid
if (!isNaN(num1) && !isNaN(num2)) {
// Perform addition
var sum = num1 + num2;
// Display the result
document.getElementById("result").innerText = "Result: " + sum;
} else {
// Handle invalid input
alert("Please enter valid numbers");
}
}
</script>