Inserting JSON File Data into React Bootstrap Table 2

Question

I'm trying to import a local JSON file to display data in a tabular way with React Bootstrap Table Next. I have looked for other resources but could not find the best way to do this. Could I get some guidance in importing my file to display on the table.

import React from "react";
import ReactDOM from "react-dom";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import BootstrapTable from "react-bootstrap-table-next";

var data = require('./data.json');

const items = [
  data
];

const Columnlist = props => {
  const columns = [
    {
      dataField: "MEMNAME",
      text: 'Dataset Name'
    },
    {
      dataField: "NAME",
      text: 'Variable Name'
    },
    {
      dataField: "LABEL",
      text: 'Variable Label'
    }
  ];
  return(
    <div style = {{padding: '20px'}}>
      <h1 className='h2'>Variables</h1>
      <BootstrapTable keyField='id' data = {items} columns = {columns} />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<Columnlist />, rootElement);

Answer 1

Here's a working example for you: https://codesandbox.io/s/festive-rgb-75z4o/. Lmk if you have any doubts.