Why buttons are not working on this Simple React App

JavaScript
1

I´m trying to do calculator on react, following a tutorial. I have the same code (I think, at least i have verified over and over) but when I click on the button which has the “onClick” attached to it, the page it doesn´t do anything (when in fact, it should display “AC” in the display )

Here I have 2 statess components:

class Display extends React.Component{
    render(){
        return (
            <p id="display">{this.props.result}</p>
        )
    }
}

class Keypad extends React.Component{
    //anclar funcion a estos botones:
    botonPresionado = e => {
        this.props.botonPresionado(e.target.name)
    }
    render(){
        return (
            <div id="grid2">
                <button onClick={this.botonPresionado} id="clear" name="clear">AC</button>
                <button id="divide" name="divide">/</button>
                <button id="multiply" name="multiply">*</button>
                <button id="seven" name="seven">7</button>
                <button id="eight" name="eight">8</button>
                <button id="nine" name="nine">9</button>
                <button id="subtract" name="subtract">-</button>
                <button id="four" name="four">4</button>
                <button id="five" name="five">5</button>
                <button id="six" name="six">6</button>
                <button id="add" name="add">+</button>
                <button id="one" name="one">1</button>
                <button id="two" name="two">2</button>
                <button id="three" name="three">3</button>
                <button id="equals" name="equals">=</button>
                <button id="zero" name="zero">0</button>
                <button id="decimal" name="decimal">.</button>
            </div>
        )
    }
}

And here the Stateful Component:

class App extends React.Component {
  constructor(props){
    super(props)
    this.state ={
      result: ""
    }
    this.botonPresionado = this.botonPresionado.bind(this);
  }

   botonPresionado = nombreBoton => {
    this.setState = ({
      result: nombreBoton
    })
  }
  render(){
    return (
      <div className="App">
        <Display result={this.state.result} />
        <Keypad botonPresionado={this.botonPresionado} />
      </div>
    );
  }
}

Here´s the full code: https://codepen.io/Assblack/pen/XwZMNv

3

Syntax issue:

this.setState = ({
      result: nombreBoton
    })

setState is a function, should be this.setState({ result: nombreBoton }).

It should work fine after fixing that

Also delete this line:

this.botonPresionado = this.botonPresionado.bind(this);

You are using a class property (botonPresionado = nombreBoton => {), you only need to bind if you are using a class method (if it was botonPresionado(nombreBoton) { instead).

Your class property is an arrow function, which has no this, so you cannot (and do not need to) bind this to it.

Example:

EDIT, also, you don’t need the constructor, you can just write:

class App extends React.Component {
  state = {
    result: ""
  };

  botonPresionado = nombreBoton => {
    this.setState({
      result: nombreBoton
    });
  };

  render() {
    .....

EDIT 2: if you want to go nuts and try newer features, this is functionally identical:

const App = () => {
  const [result, setResult] = React.useState("");

  return (
    <div className="App">
      <Display result={result} />
      <Keypad botonPresionado={setResult} />
    </div>
  );
};

const Display = ({ result }) => <p id="display">{result}</p>;

const Keypad = ({ botonPresionado }) => (
  <div id="grid2">
    <button onClick={e => botonPresionado(e.target.name)} id="clear" name="clear">AC</button>
    <button id="divide" name="divide">/</button>
    <button id="multiply" name="multiply">*</button>
    <button id="seven" name="seven">7</button>
    {/* rest of your buttons here */}
  </div>
);
1 Like