Getting Error: Expression expected.ts(1109) React js

Question

I am trying to make a tic tac toe game, but unfortunately, I am getting error under switch statement.

1.import React from 'react';
2.import {FaTimes, FaPen, FaRegCircle} from 'react-icons/fa';
3.
4.const Icon = ({name}) =>(
5.  ***switch*** (name) {
6.        case "cirle":
7.            <FaRegCircle className='icons'></FaRegCircle>
            break;
        case "cross":
            <FaTimes className='icons'></FaTimes>
            break;
        default:
            <FaPen className='icons'></FaPen>
            break;
   };
);

export default Icon;

I am getting an error in the 5th line saying Expression expected.ts(1109) under switch keyword.

Why did this problem appear and how do I resolve it??

Answer 1

You cannot use switch statement as an expression. And arrow function without function body expects expression after fat arrow =>.

You need to wrap function body in curly brackets {...} and also add return keyword for each component, like so:

const Icon = ({name}) => {
  switch (name) {
        case "cirle":
            return <FaRegCircle className='icons'></FaRegCircle>
            break;
        case "cross":
            return <FaTimes className='icons'></FaTimes>
            break;
        default:
            return <FaPen className='icons'></FaPen>
            break;
   };
};