React Numeric Input Sum Calculator

Question

the following code is a dynamic sum calculator made in ReactDOM extracted from codepen https://codepen.io/tfbrown/pen/zjXvZy

class NumericInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      num1: 0,
      num2: 0,
      result: 0
    };
    this._changeNum1 = this._changeNum1.bind(this);
    this._changeNum2 = this._changeNum2.bind(this);
  }
  
  _changeNum1(e) {
    if (e.target.validity.valid) {
      var newNum1 = +(e.target.value)
      this.setState({
          num1: newNum1,
          result: newNum1 + this.state.num2
        }); 
    }
  }
  
    _changeNum2(e) {
    if (e.target.validity.valid) {
      var newNum2 = +(e.target.value)
      this.setState({
          num2: newNum2,
          result: this.state.num1 + newNum2
        }); 
    }
  }

  render() {
    return (
      <div>
        <div>
          <p>first number:</p>
          <input type="number" value={this.state.num1} onChange={this._changeNum1} step="any" />
        </div>
        <div>
          <p>second number:</p>
          <input type="number" value={this.state.num2} onChange={this._changeNum2} step="any" />
        </div>
        <p>Result: {this.state.result}</p>
      </div>
    )
  }  
}  

// The following is boilderplate JavaScript
ReactDOM.render(<NumericInput />, document.getElementById("main"));

the problem is that I want to use this code but my project is made in Next.js and I would like to make this code functional in the .js file without the need for an html DOM making it functional in this index.js file.

import { useWeb3React } from "@web3-react/core"
import { useEffect } from "react"
import { injected } from "../components/wallet/Connectors"
import Web3 from 'web3'
import { Icon } from '@iconify/react';
import React, { useState } from "react";

export default function Home() {
 
    return (

  
    )

}

Bunny · Accepted Answer · 2022-05-28 03:29:03Z

I think this is what you are looking for? (I'm writing it in React, maybe it'll be similar to Next.JS)

I'm just do a little simple one, just tweak or modify it to your liking. Numeric Input Sum Calculate

So for simple, just create 2 function called changeFirstNumber, changeSecondNumber and 3 state called firstNumber, secondNumber and result

Every time we increase/decrease either first number or second number, it will count itself and the second number then we update it with setState and Result will do the sum thing.

Then we use useEffect() with 3 dependencies to check whether a state is changed/ updated, it'll re-render the page again.

Code:

import "./styles.css";
import { useState, useEffect } from "react";

export default function App() {
  let [firstNumber, setFirstNumber] = useState(0);
  let [secondNumber, setSecondNumber] = useState(0);
  let [result, setResult] = useState(0);

  const changeFirstNumber = (e) => {
    setFirstNumber(+e.target.value);
  };

  const changeSecondNumber = (e) => {
    setSecondNumber(+e.target.value);
  };

  useEffect(() => {
    setResult(firstNumber + secondNumber);
  }, [firstNumber, secondNumber, result]);

  return (
    <div className="App">
      First Number:{" "}
      <input
        type="number"
        value={firstNumber}
        step="any"
        onChange={(e) => changeFirstNumber(e)}
      />
      <br />
      Second Number:
      <input
        type="number"
        value={secondNumber}
        step="any"
        onChange={(e) => changeSecondNumber(e)}
      />
      <br />
      Result: {result}
    </div>
  );
}

Thanks for your answer, although the values of the inputs remain at 0 when deleting the numbers, I would like there to be no number left in the input

Collectives™ on Stack Overflow

React Numeric Input Sum Calculator

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related