Front End Development Libraries Projects - Build a JavaScript Calculator

JavaScript
1

Tell us what’s happening:
I’m using React for the calculator project and i’m trying to setup a basic relationship between the button “1” and the displayed number (state.numberDisp), the way i want it to work is I pass the “1” string as an argument to the numberPress() method when the button (id=“one”) is clicked, but that seems to not be possible with React? I don’t want to create a separate method for each button.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 OPR/96.0.0.0

Challenge: Front End Development Libraries Projects - Build a JavaScript Calculator

Link to the challenge:

2

There’s absolutely no need to manually handle mouse presses, the poin t of React is that you don’t need that. So for example this sets the “display” in the example based on what button gets pressed:

function CalcDisplayExample () {
  const [display, setDisplay] = React.useState("");

  return (
    <figure id="calc">
      <p id="screen">{display}</p>
      <div id="keypad">
        <button onClick={() => setDisplay("")}>AC</button>
        <button onClick={() => setDisplay((curr) => curr + "1")}>1</button>
        <button onClick={() => setDisplay((curr) => curr + "2")}>2</button>
        <button onClick={() => setDisplay((curr) => curr + "3")}>3</button>
        <button onClick={() => setDisplay((curr) => curr + "4")}>4</button>
        <button onClick={() => setDisplay((curr) => curr + "5")}>5</button>
        <button onClick={() => setDisplay((curr) => curr + "6")}>6</button>
        <button onClick={() => setDisplay((curr) => curr + "7")}>7</button>
        <button onClick={() => setDisplay((curr) => curr + "8")}>8</button>
        <button onClick={() => setDisplay((curr) => curr + "9")}>9</button>
        <button onClick={() => setDisplay((curr) => curr + "0")}>0</button>
        <button onClick={() => setDisplay((curr) => curr + "+")}>+</button>
        <button onClick={() => setDisplay((curr) => curr + "-")}>-</button>
        <button onClick={() => setDisplay((curr) => curr + "*")}>*</button>
        <button onClick={() => setDisplay((curr) => curr + "/")}>/</button>
      </div>
    </figure>
  );
}

See https://codepen.io/sutor/pen/dyqQebx

3

Thanks for the reply, I’m new to React and I only did the course on freecodecamp and from what i understand you’re using hooks there, the course didn’t cover this topic so i wasn’t aware of a possible solution like this. I’ll research and learn more about it.

4

I’m following this tutorial and it actually explains how to solve the problem i had, turns out you can pass the arguments like i wanted, just had to put the function call inside another function

Tutorial: Tic-Tac-Toe – React (scroll down a little)

5

Ah, sorry, it’s almost exactly the same anyway:

class CalcDisplayExample () {
  state = {
    display: "",
  };

  render() {
    return (
      <figure id="calc">
        <p id="screen">{this.state.display}</p>
        <div id="keypad">
         <button onClick={() => this.setState({ display: ""})}>AC</button>
        <button onClick={() => this.setState((curr) => ({ display: curr + "1"})}>1</button>
        ....etc