score:0
when using axios you have to use
fetch.data.data
i also suggest you to use react useeffect with you do api calls. the recommended way of doing this is below.
import react from 'react';
import axios from 'axios';
import './app.css';
function app() {
let [facility, setfacility] = react.usestate([]);
const fetchdata = react.usecallback(() => {
axios({
"method": "get",
"url": "your_api_endpoint_here",
"headers": {}, "params": {}
})
.then((response) => {
const apiresponse = response.data // this is response data from axios
console.log("response: ", apiresponse.data) // this is response data from api
setfacility(apiresponse.data) // only response from api is set in state
})
.catch((error) => {
console.log(error)
})
}, [])
react.useeffect(() => {
fetchdata()
}, [fetchdata])
return (
<div classname="app">
<table >
<tablehead>
<tablerow>
<tablecell />
<tablecell >
facility code
</tablecell>
<tablecell >
facility name
</tablecell>
</tablerow>
</tablehead>
<tablebody>
{
facility.map((item, idx) => {
return (
<>
<tablerow
key={idx}
>
<tablecell >
{item.facility_code}
</tablecell>
<tablecell>
{item.facility_name}
</tablecell>
</tablerow>
</>
);
})
}
</tablebody>
</table>
</div>
);
}
export default app;
score:0
maybe you're trying to map a list that isn't there yet? try doing this
{facility && facility.map((item, idx) => {
score:1
i created this example on codesanbox: https://codesandbox.io/s/hardcore-joana-xfybt?file=/src/app.js
there are multiple things that can go wrong.
first of all, you have to validate to have data before using the map. so you can do something like:
step 1:
so, first change:
{facility.map((item, idx) => {
to this:
{facility && facility.map && facility.map((item, idx) => {
step 2:
also, take into consideration how you're receiving the answer, usually with axios. because axios
returns response
. if you. want to access the body of the response is response.data
, if your body also has data. probably you need to do something like: fetch.data.data
(check the getdata function)
Source: stackoverflow.com
Related Query
- How to fix map is not a function error in React?
- How to fix map is not function even there is already set data in the useState using React Hook
- How to fix "TypeError: fsevents is not a constructor" react error
- How to fix nextCreate is not a function setting up useMemo setting up authentication react router and hooks
- How to fix '_react["default"].memo is not a function. (In '_react["default"].memo(connectFunction)' error in React native?
- How to fix TypeError _interopRequireDefault is not a function in Create React App
- How to Fix "export 'React' (imported as 'React') was not found in 'react'" Error in React js
- How to fix "TypeError: categories.map is not a function" error in React
- How to fix the type error Type '(string | Element) [] is not assignable to type 'string | Element | undefined' using react and typescript?
- How do I fix a React TypeScript error with the return value of useHotkeys hook not matching the type of the div element ref prop
- How to fix 'Hooks can only be called inside the body of a function component' error in React custom hook?
- How to fix 'library is not defined' error in my react app
- How to fix Uncaught TypeError: Object(...) is not a function error when I connect Redux to the project
- react map is not a function error in my app
- Error with WEB3js - NodeJs.utils in vite react ts app - How to resolve TypeError: callbackify is not a function
- How to fix "TypeError: Object(...) is not a function" when using a wrap function on React Component to authenticate user login with Browser Router
- How to fix "Response to preflight request doesn't pass access control check: It does not have HTTP ok status" error in react app with nodejs api
- how to fix eslint error 'pendo is not defined' in my react application
- Error in map function / Objects are not valid as a React child / React.js
- How to fix error type void is not assignable to type using react and typescript?
- React push object into array and map error map not a function
- map is not a function ERROR after using push on an array in REACT
- React state update error whenever i open someone's image, and image not redering too. How can I fix this error
- I AM HAVING ERROR WHEN TRYING TO MAP A DATA IN REACT . Objects are not valid as a React child (found: object with keys {children}), How do i solve it?
- How to fix the error type Item[] | undefined is not assignable to Item[] type using react and typescript?
- How to fix React Context's object is not a function - TypeError
- Expected an assignment or function call and instead saw an expression error in react if return is not present inside map statement why?
- how to fix the error (is not a function) in react
- React Google Map Fitbounds not a function error
- React Tooltip component with TypeScript getting a 'Possibly Undefined' error on my useRef element, not sure how to fix
More Query from same tag
- Using react 15 in piral
- React JS handle the onchange event to pass it on fetch URL
- React renderDOM in multiple spots on same page?
- Fading a component in and fading another one out React.js
- React internet explorer 11 rendering the result of mapping over an Immutable collection error
- React Testing Library - Simulating uploading file with FileReader
- axios/react post request : no parameter sent to backend (flask api)
- What is Object Buffer in Node?
- Rendering component based on state/prop in React?
- How to make autosuggest suggestions overflow the dialog container?
- Accessing Props Error in Stateful Child Component
- Deleting multiple elements in an array one after another in React.js
- Conditionally render multiple elements inside a react fragment
- How a React component is able to access props not passed to that component?
- Child component not re-rendering even though parent state is updated using hooks
- CSS Triangles in React Native
- How to add key:value in object iteratively
- How to import jQuery UI using ES6/ES7 syntax?
- How to redirect a link using History to a page
- Write and then read at the same time from LocalStorage in ReactJS + Redux
- Redux store get empty in component
- Passing mapped button ID to component
- In graphql, what is the best way to combine multiple sources where fields in both sources share a common value?
- Pass data between class components through link in reactjs
- Understanding React Higher-Order Components
- When using Material-UI's tab component, how do I customize the style for a selected tab?
- react/scss body background-image becomes [object Object]
- React.js (Reference Error: React is not defined)
- React router browser history with server routing
- Why is preventDefault() not working in ReactJS properly?