Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

[Duda] La suma y/o resta no funcionan en pantalla pero si en la consola

La suma y/o resta no funcionan en pantalla pero si en la consola. dejo mi codigo

esta es la funcion:

import { useState } from "react";

function FuncComponent() {
    const [value, setValue] = useState(0)

    return ( 
        <div>
            Componente funcional
           <p>
              <button onClick={ () => setValue(value-1) }>-</button> { value }

              <button onClick={ () => setValue(value+1) }>+</button> 
          </p>
    </div>
    )
}

export default FuncComponent;

esta es la clase:

import  { Component } from "react";

class ClassComponents extends Component{
    constructor() {
        super()
        this.state = {
            contador: 0,
        }
    }
    render() {
        return(
           <div>
              Class Component
              <p>
                <button onClick={() => this.setState({ contador: this.state.contador - 1, })}>-</button>
                {this.state.contador}
                <button onClick={() => this.setState({ contador: this.state.contador + 1, })}>+</button>
              </p>
                </div>
                )
    }

}


export default ClassComponents

este es app.js

import './App.css';
import ClassComponents from './components/ClassCompononents';
import FuncComponent from './components/FuncComponents';

function App() {
  return (
    <div>
      <ClassComponents/>
      <FuncComponent/>
    </div>
  )
};

export default App;
2 respuestas

¡Hola Armando!

Gracias por compartir tu código. Parece que el problema se debe a que el estado value en la función FuncComponent y el estado contador en la clase ClassComponents no están sincronizados.

Para solucionar este problema, te sugiero que utilices el mismo nombre de estado en ambas componentes. Por ejemplo, puedes cambiar el nombre del estado en la función FuncComponent a contador en lugar de value. De esta manera, ambos componentes usarán el mismo estado y la suma y resta se reflejarán correctamente en pantalla.

Aquí te dejo el código modificado de la función FuncComponent:

import { useState } from "react";

function FuncComponent() {
    const [contador, setContador] = useState(0)

    return ( 
        <div>
            Componente funcional
           <p>
              <button onClick={ () => setContador(contador-1) }>-</button> { contador }

              <button onClick={ () => setContador(contador+1) }>+</button> 
          </p>
    </div>
    )
}

export default FuncComponent;

Espero que esto te ayude a solucionar tu problema. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)

solucion cuando te traduzca automaticamente la pagina a español ponele que no, o dejala en ingles