React Js Divide Two Number

React Js Divide Two Number:In React.js, you can create a simple application to divide two numbers by defining a component. First, set up a state to store the two numbers as input values. Then, create input fields for users to enter these numbers and a button to trigger the division operation. On button click, retrieve the values, perform the division, and display the result in the component's output area. Use React's state management to update the result dynamically. Ensure error handling for cases like division by zero. React's declarative approach and component-based structure make it easy to build such interactive and responsive web applications for various calculations, including division.

written

reviewed

updated

How can Reactjs be used to divide two numbers in a user interface?

This React.js code defines a simple web application for dividing two numbers. It uses React hooks for state management. The app initializes two numbers, num1 (set to 50) and num2 (set to 3), and displays input fields for these numbers. When the "Divide" button is clicked, it checks if num2 is not zero, and if so, it calculates and displays the result of num1 divided by num2. If num2 is zero, it shows an alert indicating that division by zero is not allowed. The result is updated in real-time as the user enters new values.

React Js Divide Two Number Example

<script type="text/babel">
    const { useState } = React;
    function App() {
      const [num1, setNum1] = useState(50);
      const [num2, setNum2] = useState(3);
      const [result, setResult] = useState(null);

      const handleDivide = () => {
        if (num2 === 0) {
          alert("Cannot divide by zero!");
          return;
        }

        setResult(num1 / num2);
      };

      return (
        <div className='container'>
          <h2 className='title'>React Js Divide Two Number</h2>
          <label className='label'>First Number</label>
          <input
            className='input'
            type="number"
            placeholder="Enter number 1"
            value={num1}
            onChange={(e) => setNum1(parseFloat(e.target.value))}
          />
          <label className='label'>Second Number</label>
          <input
            className='input'
            type="number"
            placeholder="Enter number 2"
            value={num2}
            onChange={(e) => setNum2(parseFloat(e.target.value))}
          />
          <button className='button' onClick={handleDivide}>Divide</button>
          {result !== null && <p className='result'>Result: {result}</p>}
        </div>

      );
    }

    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

Run

Output of React Js Divide Two Number

Pasted Image

How do you achieve integer division without decimals in Reactjs for two numbers?

This React.js code divides two numbers without decimals. It uses React state to manage the numerator, denominator, and result. Users input the numerator and denominator in separate input fields. When they click the "Divide" button, it calculates the division result, then uses Math.floor() to obtain the whole number result without decimals. The result is displayed below the button. This simple React application enables users to perform integer division and see the whole number quotient as the output.

React Js Divide Two Number without Decimal

  <script type="text/babel">
    const { useState } = React;
    function App() {
      const [numerator, setNumerator] = useState(7);
      const [denominator, setDenominator] = useState(3);
      const [result, setResult] = useState(0);

      const handleNumeratorChange = (event) => {
        setNumerator(parseInt(event.target.value, 10));
      };

      const handleDenominatorChange = (event) => {
        setDenominator(parseInt(event.target.value, 10));
      };

      const handleCalculate = () => {
        const divisionResult = numerator / denominator;
        const wholeNumberResult = Math.floor(divisionResult);
        setResult(wholeNumberResult);
      };

      return (
        <div className='container'>
          <h3 className='title'>React Js Divide Two Number without Decimal</h3>
          <label className='label'>First Number</label>
          <input className='input' type="number" value={numerator} onChange={handleNumeratorChange} />
          <label className='label'>Second Number</label>
          <input className='input' type="number" value={denominator} onChange={handleDenominatorChange} />
          <button className='button' onClick={handleCalculate}>Divide</button>
          <p className='result'>Result: {result}</p>
        </div>

      );
    }

    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

Run

Output of React Js Divide Two Number without Decimal