0

estoy intentando hacer una pagina consumiendo una API con react, pero me surgio la duda de: ¿Cual es la forma correcta de mostrar el valor de una variable en react?

Se que se puede hacer algo como:

<h2>{variable}</h2>

Pero al estar dentro de una funcion, no me deja hacer eso, lo tengo tal que asi:

  const callback = (res) => {
    const htmlCity = document.getElementById('city-name') 
    let cityName = res.data.name //Esta es la variable que quiero mostrar
    htmlCity.innerHTML = `City: ${cityName}`

}

Y el html tal que asi:

<h2 id="city-name">City: </h2>

Muchas gracias por su respuesta

3 respuestas 3

1

React funciona en base a estados que pueden modificarse por alguna razón. Esos estados deben ser controlados para que React pueda trabajar con ellos.

Por lo que si necesitas crear una variable, y dicha variable va a cambiar a los largo del flujo - ya sea porque depende del valor de un input, de un select o algun elemento del DOM -, necesitas crear un estado que controle el cambio de esa variable.

Para tu caso sería

const [city, setCity] = useState("");

const handleChange = ({ target: { value } }) => {
   setCity(value);
};

return (
  <div className="App">
    <h1>Ciudad: {city}</h1>
    <input value={city} onChange={handleChange} />
  </div>
);

Donde mediante el hooks useState, controlamos el estado de nuestro elemento, y en la función handleChange, le asignamos el valor ingresado en el input a dicho estado mediante setCity. Finalmente solo muestras la variable como ya sabes hacerlo.

Si tienes alguna duda, nos comentas

2
  • Hola, gracias por tu respuesta, pero no sabria como afecta target en la funcion, estoy intentando hacerlo al pie de la letra pero me dice que target es undefined Commented el 17 ene. 2022 a las 3:04
  • @HatoriHanso Podrías pasarle un event entonces -> const handleChange = event => { setCity(event.target.value) } debería bastar Commented el 17 ene. 2022 a las 14:30
0
import React, { useState } from "react"; 

const App = () => {

  const [ city, setCity ] = useState("City-1")

  return(
    <div>
      <h2> City: { city }</h2>
      
      <input onChange={(e) => setCity(e.target.value) } />
    </div>
  )

}
2
  • Te invito a leer Cómo responder. Cuando respondas una pregunta y coloques código, por favor explica el funcionamiento del mismo, puedes apoyarte con documentación y/o con comentarios adicionales, de este modo tu respuesta tendrá mejor utilidad tanto para el OP como para futuros visitantes. Commented el 15 ene. 2022 a las 8:45
  • Hola Andres, muchisimas gracias por tu respuesta pero no es lo que buscaba, mi pregunta es como mostrar una variable que se genera o guarda dentro de una funcion Commented el 15 ene. 2022 a las 16:25
0

lo mejor que puede hacer es usar useState que es un Hook para el estado en este caso de la constante y le puede dar un valor inicial como en el ejemplo o en blanco y enviarle el dato en este caso con un input a setCityName, así quedo el código, espero sea de ayuda.

import { useState } from "react";

export default function App() {
  const [cityName, setCityName] = useState("Bogotá");

  return (
    <>
      <h2>{cityName}</h2>
    </>
  );
} 

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.