Rendering based on Enum in ReactJS

Question

In App.js

import "./styles.css";
import { IconType }, Icon from "./icons"; //<-this line gives syntax error

export default function App() {
    return <Icon icon=IconType.Complete/>
};

In icon.js

import React, { useMemo } from 'react';

export enum IconType //<-this line gives syntax error
{
     Complete,
     Active,
     Risk,
     Overdue
}
const Icon = ({ props }) => {
     if (props.icon === IconType.Complete){
       return <h1>icon</h1>
     }
}

export default Icon;

See codesanbox

How should I fixed the syntax error above marked in the comment?

Answer 1

You are getting an error and you can observe from the description 'enum' declarations can only be used in TypeScript files.

From the documentation.

Enums are one of the few features TypeScript has which is not a type-level extension of JavaScript.

Read this for better understanding.

Answer 2

Enum is a feature used in typescript and it can not be used in .js files.

So, the first way is to install typescript and rename the .js to .tsx. The file extension of .tsx let you can write typescript and jsx. For more explanation please reference this.

I have been improved on this changes and this is a workable example codesanbox.