score:0
Accepted answer
the appdata
is set asynchronously
and may have not been set while you are trying to log
in the render
method. either log the response in the then
method of getappdata
or in the render
method with console.log(value && value["operating_cities"]);
you can either set an empty object in your initial state
componentdidmount(){
client.getappdata().then(res=>{
this.setstate({
initiated: true,
appdata: res // this is where you are setting the data and this is asynchronous
});
})
this.setstate({
// visiblesidebar: window.innerwidth > 720,
innerwidth: window.innerwidth,
appdata: {} //option 1: you can initialize here with an empty object and you don't have to add checks in your render method
})
}
or you need to handle it in the render
method
const value = this.state.appdata;
if(value){ //option 2: check if value has been set, default it was undefined
// do your rendering
} else {
// you can display a loading spinner or something...
}
Source: stackoverflow.com
Related Query
- How to access a specific element of API data?
- How to fetch json data from a url that requires an api key to access the data in reactjs?
- Mapping over API data in a react component - how to access a particular property?
- How to access fetched data from an API
- (React) How to access a specific element that is being mapped and returned?
- How to store specific API data in local storage and show those data to another page in ReactJs?
- How to fetch and access data from own api using res.send()
- How to send specific API data from one component to another called within React Component in react
- How to fetch and render specific data from an API
- How to access a DOM element in React? What is the equilvalent of document.getElementById() in React
- How to access data attributes from event object
- How to fetch data through api in redux?
- React, how to access the DOM element in my render function from the same component
- How to fetch API data from Axios inside the getServerSideProps function in NextJS?
- ReactJS: how to call useEffect hook only once to fetch API data
- How to Cache API data using AsyncStorage React Native
- How to use getStaticProps in _app.js for showing data fetched from api in every pages in Next.js
- React Select - How to show / iterate through data from api call in option instead of hardcoding options?
- Gatsby + Markdown: How to get data from a specific markdown file into a single page?
- How to push into an array of object using the spread operator to a specific element
- How do I access data returned from an axios get to display on a web page using react js?
- using useEffect in combination with Axios fetching API data returns null - how to deal with this?
- Bind event handler to document & have access to firebase api data via useEffect
- How to only allow a specific element type as children using Flow and React?
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- How can I reuse the API data for all the pages in react js
- How can I cache data from API to Cache Storage in React PWA?
- How to generate a unique id automatically for the data that is posted to an API server using axios library in redux
- How do i pass data up from a child web component to it's direct parent element
- How to remove a specific event listener from a react.js element
More Query from same tag
- How to avoid re-renders at the App level when I make a change to a child component (like a searchbar)?
- Array map function not return updated items
- Semantic UI React -- Can't Set Key Property on Table Row
- Getting multiple svg element when data get loaded D3
- Jest mocking with Next useRouter
- How add object to database use method POST in React?
- How to pass a function from outside of main component using react-redux's Provider
- jquery-InputMast overriding existing events on input field
- JSX Spread Attributes on client side non-ES6 browsers
- OnClick on child div should not trigger parent div's onClick method for a particular child
- Problem with using setTimeout function together with an arrow function that sets a particular state
- react re render component based on api fetch
- How to wait for all useEffect Chain using Jest and Enzyme when all of them make asynchronous calls?
- searchable dropdown in react
- ReactJS Component Architecture Problems / Nested Components or Single Component Manager
- AWS Amplify GraphQL query - list all elements and filter the owner's ones in different view
- react-router-dom <Link> changes route but doesn't render until user clicks page
- How to "clear mocks" for the "@testing-library/react" fireEvent?
- Why the lang parameter isn't passed down to getStaticProps from getStaticPaths?
- RenderItems is not defined no-undef inside return
- Warning: Invalid attribute name: `'data-*'`
- How to convert API data into local language data?
- Running example with react-router in typescript 1.6 with TSX
- React: Cannot design list item's index number (using map)
- React js - Why is navbar component not being imported?
- isomorphic reactjs cdn assets
- react-quilljs and reactjs-popup don't work together
- React JS: set all values of nested object to false except for one
- Return value prop of component in reactjs
- How does the inner function in a HOC get the props