How to render local json using single-spa with reactjs

Question

I'm trying to make a map from a local json file, using Single-SPA (Application) and ReacJS, but

This is the ReactJS component that calls the json file:

import menuJson from './menu.json';
    
const MenuItems = () => {
  const menu = menuJson.menu.map((data) => {
    return <li>{data.name}</li>;
  });
    
  return (
    <>
      <ul>{menu}</ul>
    </>
  );
};
    
export default MenuItems;

And this is the local JSON file

{
  "menu": [
    {
      "name": "Principal",
      "sub": [{ "name": "Sub menu", "url": "" }]
    }
  ]
}

This is the error that the application is showing in the browser devtools logs

I made a test in a clear application using just ReactJS, and it works well.

Answer 1

I solved the problem by adding the key props at the <li> tag in the ReactJS component jsx file, like this.

import menuJson from './menu.json';
    
const MenuItems = () => {
  const menu = menuJson.menu.map((data, index) => {
    return <li key={index}>{data.name}</li>;
  });
    
  return (
    <>
      <ul>{menu}</ul>
    </>
  );
};
    
export default MenuItems;

• The json file remains the same.