2
respuestas

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

Referente al curso React: Function Components, en el capítulo Iniciando con functions components y actividad Clases vs Function

por Armando Pascual Gonzalez
| 86.1k xp | 28 posts

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
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡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! :)
por Damian Enrique Campaña
| 80.8k xp | 4 posts
Administrativo

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