Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

154
Vistas
Access variable outside of a callback ReactJS

New to RJS, Trying to access my variable "txt" outside the Data.map callback where it was originally declared, how would I be able to do this and have full access to the variable?

CodeSandbox

import Data from "./names.json";
export default function App() {
  //want to access txt in here <==============
  // console.log(txt) and stuff after accessing it here
  return (
    <div className="App">
      {Data.map((post) => {
        var txt = post.Name;
        return <h1>{post.Name}</h1>;
      })}
    </div>
  );
}

Thanks

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Many ways, but the useState hook is pretty solid especially if you want to take advantage of React's speed.

import Data from "./names.json";

export default function App() {
  const [ txt, setTxt ] = useState(""); // sets it to an empty string to begin with
  
  useEffect(() => {
    console.log(txt); // every time the 'txt' variable changes, log it
  }, [ txt]); // << React calls this a dependency and will only run this function when this value changes.

  console.log(txt); // also accessible here

  return (
    <div className="App">
      {Data.map((post) => {
        setTxt(post.Name); // This updates the 'txt' variable from earlier ^^
        return <h1>{post.Name}</h1>;
      })}
    </div>
  );
}

If all that is too long-winded, just keep your txt variable outside of the function component, and React won't reset it every loop. You'll still be able to access its value anywhere in the file. Example:

import Data from "./names.json";
let txt = "";

export default function App() {
  return (
    <div className="App">
      {Data.map((post) => {
        txt = post.Name;
        return <h1>{post.Name}</h1>;
      })}
    </div>
  );
}
about 4 years ago · Juan Pablo Isaza Denunciar

0

afaik you can't because text is scoped to the map function and you can't access it outside of it. You can try putting it in a state or make a function and make it an argument of that function from inside the map function.

import Data from "./names.json";
import {useState} from 'react'
export default function App() {
  //want to access txt in here <==============
  // console.log(txt) and stuff after accessing it here
  const [text,setText] = useState()
  function getText(text) {
    console.log(text) // this function gets called in every instance of the map loop
    //you can run your logic here to find specific information and then set it to the state like in this example
    if (text === "myText") {
        setText(text)
    }
  }
  
  return (
    <div className="App">
      {Data.map((post) => {
        var txt = post.Name;
        getText(txt) // will run and recieve the var txt every instance
        return <h1>{post.Name}</h1>;
      })}
    </div>
  );
}
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda