0

les cuento que soy mas de angular que de react pero estoy empezando y quiero saber algunos concptos, en angular al cambiar los datos que contiene una variable el html reacciona a esos cambios y cambia solo y me estoy dando cuenta que react no hace eso, quiero saber como puedo hacer para que cuando cambie los datos que contiene una variable se muestre en el navegador, les dejo un pequeño ejemplo pero entendible

estado: string = ''

function changeState(){
  estado = 'demo'
}

export default function HeaderComponent(){
   return(
      <div>
        <Button onClick={changeState} />
       {estado}
      </div>
    )

la idea es que cuando clickee en el boton el estado que es un simple '' quiero se pase a ser un string que diga 'demo' pero esto no cambia en el navegador, escuche hablar de los setState() pero no lo entendi, estoy por implementar rxjs pero quiero saber las opiniones de ustedes

1 respuesta 1

0

Para que se vuelva a renderizar el componente puedes utilizar Hooks, un pequeño ejemplo:

import React, { useState } from 'react';
import "./styles.css";

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Echale un vistazo a la guía: https://es.reactjs.org/docs/hooks-intro.html

Una explicación rápida sería:

  • El parámetro que le pases a useState será el valor inicial de la primera variable (count en este caso). Y la segunda variable devuelta por useState es la función para cambiar el valor de la primera (un set, por eso se suele utilizar esta terminología)

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.