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)


Related Query

More Query from same tag