score:1
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>
);
}
score:2
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>
);
}
Source: stackoverflow.com
Related Query
- Access variable outside of a callback ReactJS
- How to take variable from outside reactjs
- React Hooks: Can't access updated useState variable outside useEffect?
- How do I access a class variable of a mixin in a reactjs class?
- How to access reactjs component state in jquery callback function
- ReactJS access "this" in a callback
- React JS Access variable outside of scope
- React setState() callback issue, cant access to output variable
- ReactJs - i can't catch a variable outside of the axios' loop
- How to access variable values inside componentWillMount() in reactjs
- Is it possible to access state variable outside of react render function?
- how to access modified value outside of the ajax-query in ReactJS
- How can I access a variable outside of a function in ReactNative?
- React JS Access id_lang variable outside of scope?
- How to Access Variable Outside of Return in a Child from Parent?
- how to access state variable in componentDidMount in reactjs
- React access and update variable outside of render
- can i declare a global variable outside the class in reactjs
- Reactjs ES6 Access function outside of class
- I could not pass a variable to function from outside of the functiion ReactJS
- How to I wrap a useState variable in a if statment, but still have it's value be available outside the if reactjs
- Reactjs Access class method outside the class but in same file
- Variable access in ReactJS
- How to access a local variable in filereader onload callback
- ReactJs Trying to get variable from callback
- ReactJS access variable out of scope in render function
- What is the best way to access redux store outside a react component?
- Access React Context outside of render function
- How to access the "key" property from a reactjs component
- ReactJS - How can I access the displayName of a component using javascript?
More Query from same tag
- CSV convert to JSON Returning as an empty array
- Prevent AWS Amplify From Adding Trailing Slash and Forcing Redirect
- Element is not removed from array
- React.js, HTML, CSS: can't figure out why align-items doesn't work
- ' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
- Can not render component correctly in ReactJS
- How can I make responsive images from Ghost (Content API) to Next.js?
- Why is my component in React being called multiple times?
- How to refer JSX file to an HTML Page
- Cross-Origin Request Blocked in node,reactjs,express combination
- React hook error when changing size of rendered array
- How to filter the same id as the URL Params?
- Nextjs active navigation bar with styled-components
- How can I use map() to show my datas from API?
- Play mp3 from cache without service worker using react-player
- Why does React re-render children when the parent changes?
- React - Algorithm of a roulette spinner
- The items of dropdown menu overflow from the box
- menuLinks.map is not a function
- how to move placeholder to top on focus and while typing
- How to load data imediately after posting successfully in react with useEffect on Reactjs
- React Component not rendering on using react router 4
- Changing the state of one component that gets declared multiple times in React - Better Practices?
- How to integrate javascript libraries into react?
- React : Focus on Froala Editor (On External Event)
- react select async option,
- react js iterate over array in Component props
- html2canvas dynamically rendered div
- How do you get Material-UI Tabs to work with react-router?
- React handleOnSubmit() need to be clicked twice