Estoy aprendiendo a usar React Js haciendo una calculadora y me quede atorado en la parte del constructor
El tutorial dice de que la clase constructor va en donde estan los botones, y va asi
constructor() {
super();
// set our default state
this.state = {
question: '',
answer: ''
}
// Bind our handleClick method (sets 'this' explicitly
// to refer to this componenent) We did this because 'this'
// would refer to the source of the click events
this.handleClick = this.handleClick.bind(this);
}
Coloque ese codigo en donde va la calculadora, y tira un error diciendo "UNREACABLE CODE DETECTED" o dice que falta un ";"
Este es el tutorial que estoy siguiendo https://www.geeksforgeeks.org/reactjs-calculator-app-adding-functionality/?ref=rp
Esto es lo que tengo en donde esta la calculadora por ahora
import './css/App.css';
import Button from './operations/button.js';
function App() {
return (
<div className="calculator card">
<input type="text" className="calculator-screen z-depth-1" value="0" disabled />
<div className="calculator-keys">
<Button type="Button" label={'+'} className="operator btn btn-info" value="+" name="operator"></Button>
<Button type="Button" label={'-'} className="operator btn btn-info" value="-" name="operator"></Button>
<Button type="Button" label={'*'} className="operator btn btn-info" value="*" name="operator"></Button>
<Button type="Button" label={'/'} className="operator btn btn-info" value="/" name="operator"></Button>
<Button type="Button" label={'root'} className="operator btn btn-info" value="square_root"></Button>
<Button type="Button" label={'cube root'} className="operator btn btn-info" value="cube_root"></Button>
<Button type="Button" label={'^'} className="operator btn btn-info" value="power_of"></Button>
<Button type="Button" label={'7'} value="7" className="btn btn-light waves-effect"></Button>
<Button type="Button" label={'8'} value="8" className="btn btn-light waves-effect"></Button>
<Button type="Button" label={'9'} value="9" className="btn btn-light waves-effect"></Button>
<Button type="Button" label={'4'} value="4" className="btn btn-light waves-effect"></Button>
<Button type="Button" label={'5'} className="btn btn-light waves-effect"></Button>
<Button type="Button" label={'6'} className="btn btn-light waves-effect"></Button>
<Button type="Button" label={'1'} className="btn btn-light waves-effect"></Button>
<Button type="Button" label={'2'} className="btn btn-light waves-effect"></Button>
<Button type="Button" label={'3'} className="btn btn-light waves-effect"></Button>
<Button type="Button" label={'0'} value="0" className="btn btn-light waves-effect"></Button>
<Button type="Button" label={'.'} className="decimal function btn btn-secondary" value="."></Button>
<Button type="Button" label={'AC'} className="all-clear function" variant="danger" value="all-clear"></Button>
<Button type="Button" label={'='} className="equal-sign operator btn btn-default" value="="></Button>
</div>
</div>
);
}
export default App;
Button
, saludos