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 (
)
}
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>
);
}