Pass JSON data returned from fetch() to .map inside a const

Question

Right now my code is pulling its JSON from a file, I am trying to have it pull the data from an API instead, I have successfully printed the array from the API to the console, however when I try to use the .map function on the data I pulled, I receive an error saying that the variable holding my array is unidentified.

Working code that prints array to console:

import React from 'react';
import { MDBDataTable } from 'mdbreact';
import API_Data from '../myJSON_Data.json';

const DatatablePage = () => {

    fetch('https://api')
        .then((response) => {
            return response.json();
    })
    .then((data) => {
        console.log(data);
    });

  const data = {
    columns: [
      {
        label: 'Name',
        field: 'name',
        sort: 'asc',
        width: 150
      }
    ],
    rows: API_Data.map(API_Data => {
      return {
        state: API_Data.name
      }
    })
  };

  return (
    <div>
        <div>
            <div>
                <div>            
                <h1>Data from API</h1>
                <MDBDataTable
                    striped
                    bordered
                    hover
                    data={data}
                />
                </div>                            
            </div>
        </div>
    </div>
  );  
}

export default DatatablePage;

What I have tried:

import React from 'react';
import { MDBDataTable } from 'mdbreact';

const DatatablePage = () => {
    var apiData;
    fetch('https://api')
        .then((response) => {
            return response.json();
    })
    .then((data) => {
        console.log(data);
        apiData = data;
    });

  const data = {
    columns: [
      {
        label: 'Name',
        field: 'name',
        sort: 'asc',
        width: 150
      }
    ],
    rows: apiData.map(apiData => {
      return {
        state: apiData.name
      }
    })
  };

  return (
    <div>
        <div>
            <div>
                <div>            
                <h1>Data from API</h1>
                <MDBDataTable
                    striped
                    bordered
                    hover
                    data={data}
                />
                </div>                            
            </div>
        </div>
    </div>
  );  
}

export default DatatablePage;

Answer 1

You should not do async(side-effect) call in render(here functional component). For that use useEffect and set state using useState. Read more about hooks.

Here is the sample, You read and modify according to ur need. https://reactjs.org/docs/hooks-intro.html

import React, { useEffect } from "react";
import { MDBDataTable } from "mdbreact";

const DatatablePage = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch("https://api")
      .then((response) => {
        return response.json();
      })
      .then((res) => {
        const data = {
          columns: [
            {
              label: "Name",
              field: "name",
              sort: "asc",
              width: 150,
            },
          ],
          rows: res.map((apiData) => ({state: apiData.name})),
        };
        setData(data);
      });
  }, []);
  return (
    <div>
      <div>
        <div>
          <div>
            <h1>Data from API</h1>
            <MDBDataTable striped bordered hover data={data} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default DatatablePage;

Answer 2

You can try putting the fetch() in a promise and calling the .map when the promise resolves or alternatively assign a const data within the same fetch method.