Logic problem - React does not calculate

Question

I’m starting with React now, and I had an exercise to do, the exercise consists of "draw out" multiples of 5 from an ATM, but I forgot something in the code, because when I click to calculate, just nothing happens.

Follows the code:

import React, { Component } from "react";
import './App.css';

export default class Caixa_Eletronico extends Component{

    constructor(props){
        super(props);

        this.state = {
            valorSaque: 0,
            n50: 0,
            n20: 0,
            n10: 0,
            n5: 0,
            msg: ''
        }
        this.alterarValor = this.alterarValor.bind(this);
        this.calcular = this.calcular.bind(this);
    }

    alterarValor(event){
        const target = event.target;
        this.setState({
            valorSaque: target.value
        })
    }

    calcular(){
        const dados = this.state;
        let valor = parseInt(dados.valorSaque);

        if(valor % 5 !== 0){
            this.setState({
                msg: 'O valor deve ser múltiplo de 5!'
            });
        } else {
            let n50 = parseInt(valor / 50);
            valor %= 50;

            let n20 = parseInt(valor / 20);
            valor %= 20;

            let n10 = parseInt(valor / 10);
            valor %= 10;

            let n5 = parseInt(valor / 5);

            this.Setstate({
                valorSaque: 0,
                n50: 50,
                n20: 20,
                n10: 10,
                n5: 5,
                msg: ''
        })
    }
}

    render(){
        const {state, props} = this;

        return(
            <div className="borda largura">
                <h2>Caixa Eletrônico</h2>
                <div>
                    <input type="text" onChange={this.alterarValor} placeholder="Deseja sacar quanto?"/>

                    <button type="button" onClick={this.calcular}>Sacar</button>
                </div>

                <div>
                    {state.msg}
                </div>
                <div>
                    <strong>Notas de R$ 50,00: {state.n50} </strong><br/>
                    <strong>Notas de R$ 20,00: {state.n20} </strong><br/>
                    <strong>Notas de R$ 10,00: {state.n10} </strong><br/>
                    <strong>Notas de R$ 5,00: {state.n5} </strong><br/>
                </div>
            </div>
        )
    }
}

Answer 1

Several problems encountered in your code, typos that generated in debug of javascript:

Uncaught Typeerror: this. Setstate is not a Function At Caixaeletronico.calculate (:62:22) At Object.Vh (React-dom.production.min.js:163) At Uh (React-dom.production.min.js:14) At Xh (React-dom.production.min.js:14) at af (React-dom.production.min.js:14) At Yh (React-dom.production.min.js:164) nd (React-dom.production.min.js:15) at nc (React-dom.production.min.js:15) At Of (React-dom.production.min.js:38) At (Act-dom.production.min.js:39)

and this error says that the Setstate is not a function, yes of course is not even the correct name is setState. Another problem is component name, never component name in React with underscore (_) always put the first one in uppercase and if it is compound name put in the main initials in uppercase, this is a pattern used in the world React, and finally in the setState which updates the note numbers also had typo and can be simplified as I did, example:

class CaixaEletronico extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            valorSaque: 0,
            n50: 0,
            n20: 0,
            n10: 0,
            n5: 0,
            msg: ''
        }
        this.alterarValor = this.alterarValor.bind(this);
        this.calcular = this.calcular.bind(this);
    }

    alterarValor(event){
        const target = event.target;
        this.setState({
            valorSaque: target.value
        })
    }

    calcular(){        
        let valor = parseInt(this.state.valorSaque);
        if (valor) {
          if(valor % 5 !== 0){
            this.setState({
                msg: 'O valor deve ser múltiplo de 5!'
            });
          } else {
            let n50 = parseInt(valor / 50);
            valor %= 50;

            let n20 = parseInt(valor / 20);
            valor %= 20;

            let n10 = parseInt(valor / 10);
            valor %= 10;

            let n5 = parseInt(valor / 5);

            this.setState({                
                n50,
                n20,
                n10,
                n5,
                msg: ''
          })
      }
   }
}

    render(){
        const {state, props} = this;
        return(
            <div className="borda largura">
                <h2>Caixa Eletrônico</h2>
                <div>
                    <input type="text" onChange={this.alterarValor} placeholder="Deseja sacar quanto?"/>
                    <button type="button" onClick={this.calcular}>Sacar</button>
                </div>
                <div>
                    {state.msg}
                </div>
                <div>
                    <strong>Notas de R$ 50,00: {state.n50} </strong><br/>
                    <strong>Notas de R$ 20,00: {state.n20} </strong><br/>
                    <strong>Notas de R$ 10,00: {state.n10} </strong><br/>
                    <strong>Notas de R$ 5,00: {state.n5} </strong><br/>
                </div>
            </div>
        )
    }
}
ReactDOM.render(<CaixaEletronico/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Always use the debug, this will help to check errors in your code, press the key F12 browser and in the tab console check if an error has occurred.