How to read a default export js file

Question

Good morning, I’m developing a component with React, but I’m not able to assign values from a file I created for default information. Example:

created this menu-items.js file

`export default {
       items:[
         {
          id: 1,
          title:'NFC-e',
          icon:'fa fa-file',
          url:'',
         },
        {
         id: 2,
         title:'NF-e',
         icon:'fa fa-file',
         url:'',
       },
      ]
    }`

and would like to read this information in my component index.js file, to render the component already with the attributes.

What I’ve done so far.

import React, { useState, useEffect } from 'react';
import items from './menu-item';
import './styles.css';

export default function Sidebar() {
  const [repositores, setRespositories] = useState([]);

  useEffect(() => {
    setRespositories(items);   
  }, []);

  return (
    <div className="main-sidebar">
      <div className="container-sidebar">
        <ul>
          {items.map((repo, index) => (
            <li key={index}>{repo.title}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

Answer 1

You can just name the Object during your import, for example:

index js.:

import items from './menu-itens';

So to do the reading:

items.map((repo, index) => (
            <li key={index}>{repo.title}</li>
          ))

Answer 2

Good afternoon, I managed to solve the problem that way.

import data from './menu-itens'


data.items.map(item => (
   <li key={item.id}>{repo.title}</li>
))