score:3
map function can be applied only on array not on object, as shown in the image tasks
is object but tasks.data
is array. you should set state as follows:
.then(tasks=>{
this.setstate({tasks: tasks.data}); // putt array rather than object
});
this can also be achieve by(if above solution is not applied):
this.state.tasks.data.map();
score:0
try the following:
rendertasks() {
if (this.state.tasks.hasownproperty('data')) {
return this.state.tasks.data.map(task => { // here i want to iterate over the state and it fails
return (
<li>{task.title}</li>
);
})
} else {
return (null);
}
}
when the component renders for the first time, using this.state.tasks.data.map
would fail because data is not a key in this.state.tasks
as fetch is only triggered after the didmount()
.
what this does is, if this.state.tasks has data key, then map through that data other wise return null.
score:1
you try to map over the object that holds the data array. you should map over data-array inside the tasks object :)
rendertasks() {
const {tasks: {data}} = this.state;
return ([] || data).map(task => { // here i want to iterate over the state and it fails
return (
<li>{task.title}</li>
);
})
}
Source: stackoverflow.com
Related Query
- React - State Hook map is not a function
- React - State Hook map is not a function
- React why is this simple array map function not returning anything?
- React setState opposite boolean in map function not changing state
- React - useState - why setTimeout function does not have latest state value?
- map function not working in React
- Function called in setTimeout not using current React state
- Map of React Components not re rendering on State Change
- Why react calls function in subcomponents event when this subsomponents not rendered?
- React - Adding component in Map function not adding
- state.get is not a function when trying to map the react-redux State
- Why is the state not updating inside this react Hooks component?
- Not able to access react state from socket event handler function
- React Hooks State update one step behind. For this reason my changes are not working correctly
- Axios not updating state from API in function called on Click, but works on identical function on Component Mount in React
- how to set react parent component state by a async function and then pass this state to child as props?
- React Hooks state not working properly when the function calling it is called in another function
- When Using Redux Saga with React Get This Error .. Uncaught TypeError: getPosts is not a function
- react map is not a function
- How to use map function on react state hook
- map is not a function when updating state
- React hooks not returning updated state values inside callback function from library events (FabricJS)
- Edit function not saving changes to state data in React
- React hooks updated state not passed to function
- Map function in react (err: TypeError: e.map is not a function)
- React stateless component where map function is not returning
- The state variable returned after using useState react hook shows .map is not a function
- React Hooks setState function not setting state
- React hooks map is not a function
- updated state value are not updated inside function in react
More Query from same tag
- error TS2322: Type '"openDialog('https://someurl.sharepoint.com/...' is not assignable to type 'EventHandler<MouseEvent<HTMLButtonElement>>
- How to fetch JSON API data and show that on Page using react.js
- Load the component when all data has ready
- Duplicated header in web page using React
- useState in react custom hook always calls the function
- ReactJS - How to store a string in setState and display in HTML?
- Why map out of variable gets compile error, whereas in variable it compiles OK?
- Converting Async Response to Standard Javascript Object
- How to create a custom action bar with flexible actions in React (with TypeScript)?
- .map is not a function (am I really not using an array here?)
- Pushing an iterated elements in an array into an empty array not working
- Change css class of a component by onClick on Icon in React using useState hook
- Getting data from an array in an array with ReactJS
- ReactCSSTransitionGroup doesn't work
- Why isn't setTimeout working when I persist the event that I'm using?
- console.log inside a map in react component
- Socket.io join() doing nothing
- ReactJS: Render some components only on demand
- Get first item in firestore collection query that does not match given id
- radio button "checked" disappearing after click to another radio button
- Using webpack to load CSS files from node modules
- Conditional rendering animation effect
- calling react setState multiple times in mount
- What makes a React library require preact-compat?
- Warning: Failed prop type: Invalid prop 'source' supplied to 'Image'
- Exporting Colors In React using TypeScript
- Cannot ES6 import JSX modules in Webpack
- Pass state from one reducer to another in Redux
- What is the React way of displaying a tooltip on range sliders?
- React-ReduxForm Password Confirmation not working?