recently just learning Reactjs, and I'm trying to build a calculator,
below is the function code from App.js
import './App.css';
function App() {
return (
<div className="App">
<div id="ans" className="answer">Ans = 0</div>
<input type="text" placeholder="0" className="inputid" id="result"/>
<hr/>
{/* calculator buttons below */}
<button className="opbut">+</button>
<button className="opbut">-</button>
<button className="calbut">0</button>
<button className="calbut">1</button>
<button className="calbut">2</button>
<button className="calbut">3</button>
<button className="opbut">%</button>
<button className="ansbut">=</button>
<hr/>
<div className="appName">A Simple React Calculator - Jayflo</div>
</div>
);
}
export default App;
in the onClick function for each button, i want it so that when clicked, it will display the value of the button clicked and concatenate it with the remaining values in the textfield... but i'm not getting it, after trying all possible solutions i could find online...
And it was due to the upgrade of react from class to function i guess, most are depreciated, i guess. and i'm a bit new to this, going online, seeing old solutions...
import './App.css';
export default function App() {
function handleClick(input) {
let buttonText = input.target.innerText;
let inputText = document.getElementById('result').value;
console.log(inputText + buttonText);
}
return (
<div className="App">
<div id="ans" className="answer">Ans = 0</div>
<input type="text" placeholder="0" className="inputid" id="result"/>
<hr/>
{/* calculator buttons below */}
<button onClick={handleClick} className="opbut">+</button>
<button onClick={handleClick} className="opbut">-</button>
<button onClick={handleClick} className="calbut">0</button>
<button onClick={handleClick} className="calbut">1</button>
<button onClick={handleClick} className="calbut">2</button>
<button onClick={handleClick} className="calbut">3</button>
<button onClick={handleClick} className="opbut">%</button>
<button onClick={handleClick} className="ansbut">=</button>
<hr/>
<div className="appName">A Simple React Calculator - Jayflo</div>
</div>
);
}