0

In a react app (created by vite), I need a list of categories to create a navigation menu. I have created this list in another file with .js extension. In the form of an array of objects:

// constants.js
import { MdHomeIcon, MdCodeIcon } from "react-icons/md";

export const categories = [
  { name: "New", icon: <MdHomeIcon /> },
  { name: "Coding", icon: <MdCodeIcon /> },
  { name: "ReactJS", icon: <MdCodeIcon /> },
];

react-icons package is installed.

My problem is this: before doing anything, react app return a syntax error in console: Uncaught SyntaxError: expected expression, got '<' in constants.js.

after solving the problem: In Sidebar.jsx, I want to map through categories to build a list with names and icons.:

// Sidebar.jsx
import { categories } from "./constants.js";

export const Sidebar = () => (
  <div>
    {categories.map((category) => (
      <div>
        <span>{category.icon}</span>
        <span>{category.name}</span>
      </div>
    ))}
  </div>
);
frshaad
  • 32
  • 5

3 Answers3

1

There is an error on the map loop.

You can't return 2 children in the map loop. One way to solve it is using React Fragment to wrap up those components.

https://reactjs.org/docs/fragments.html

// Sidebar.jsx
import { categories } from "./constants.js";

export const Sidebar = () => (
  <div>
    {categories.map((category) => (
      <React.Fragment>
        <span>{category.icon}</span>
        <span>{category.name}</span>
      </React.Fragment>
    ))}
  </div>
);

Another thing, you must be alert to the key prop inside lists and loops.

https://reactjs.org/docs/lists-and-keys.html

Third thing. Attach the Icon call as the value of your obj, and then call this as a react component

// Sidebar.jsx
import { categories } from "./constants.js";

export const Sidebar = () => (
  <div>
    {categories.map((category) => {
      const IconComponent = category.icon;
      return (
        <> // another way to use fragment
          <span>
            <IconComponent />
          </span>
          <span>{category.name}</span>
        </>
      )}
    )}
  </div>
);

Last but not least, there is a syntax error in your code. There is a } missing in the final line of the loop

Guilherme Moraes
  • 141
  • 6
0

You can't include JSX inside a js file but your icons are being imported from "react-icons/md" and you use them as JSX elements.

If you want to use these icons inside of constants.js try renaming it to constants.jsx

sm3sher
  • 2,764
  • 1
  • 11
  • 23
0
//data categories.js
export const categories = [
  { name: "New", icon: "Home" },
  { name: "Coding", icon: "Code" },
  { name: "ReactJS", icon: "Code" },
];

    //sidebar.js
import { categories } from "./constants.js";
import { MdHomeIcon, MdCodeIcon } from "react-icons/md";


export const Sidebar = () => (
  <div>
    {categories && categories.map((category, i) => (
      <div key = {i}>
      {category.icon === "Code"? <MdCodeIcon/> : <MdHomeIcon/>}
      <span>{category.name}</span>
      <div/>
    ))}
  </div>
);

you can edit the code as needed

infq
  • 53
  • 5