Simple calculator in React using Post Request - reactjs

Question

For educational purposes, I am trying to make a simple calculator where you have two input fields for numbers and one select field for the operator. These choices should go to a backend where it will make the calculation and return the final result.
When I press the button, it refreshes the page and it does not show the value returned from the backend.
I tried to bind the objects under this.state but ir gave me this error: Cannot read property 'bind' of undefined
I am new at coding, and not sure what is wrong with it.
class Calculator extends React.Component{
constructor(props) {
super(props)
this.state = {
firstNumber: '',
operators: '',
secondNumber: '',
total: null
}
}
handleChange = e => {
this.setState({[e.target.name]: e.target.value})
}
handleClick = () => {
const inputField = (this.state.firstNumber, this.state.operators, this.state.secondNumber)
fetch('http://localhost:1337/teste', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(inputField)
})
.then(response => response.json())
.then(data => this.setState({ total: data.valor }))
};
render() {
const { firstNumber, operators, secondNumber, total} = this.state
return (
<div>
<form onSubmit={this.handleClick}>
<input
name='firstNumber'
type='number'
min='0'
placeholder='0'
value={firstNumber}
onChange={this.handleChange}
required
/>
<select
name='operators'
value={operators}
onChange={this.handleChange}>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="%">%</option>
</select>
<input
name='secondNumber'
type='number'
min='0'
placeholder='0'
value={secondNumber}
onChange={this.handleChange}
required
/>
<button type='submit'>Calculate</button>
</form>
<div>{total}</div>
</div>
)
}
}
ReactDOM.render(
<Calculator />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"><div>

Answer 1

By default the submit button in a form sends the request to the backend and reloads the page, however in react you want to prevent that as you want to submit the form via an API to the backend (and not through the default form submit action).
Add the event as a parameter to the handleClick function like this.
handleClick = (event) => {
Then add event.preventDefault() as the first line inside your handleClick function.
This should prevent the page reloading.