0

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;
1
  • Comparte el código del componente Button, saludos
    – g.4
    Commented el 9 feb. 2021 a las 6:13

1 respuesta 1

1

En el tutorial, se están usando stateful components y tu estas usando stateless components.

Los stateless components no tienen constructor, para manejar propiedades, lo puedes hacer mediante hooks (useState).

Aquí se explica bastante bien: https://medium.com/@cgcrutch18/stateful-vs-stateless-react-components-13f647f7fc4

Para que te funcione como en el tutorial el componente debería ser stateful:

class Calculator extends React.Component {

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.