Получение ошибки: ожидаемое выражение. Ts(1109) React js

Question

Я пытаюсь сделать игру в крестики-нолики, но, к сожалению, я получаю сообщение об ошибке под оператором switch.

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;

Я получаю сообщение об ошибке в 5-й строке Expression expected.ts(1109) под ключевым словом switch.

Почему возникла эта проблема и как ее решить?

Answer 1

Вы не можете использовать switchзаявление как выражение. И функция стрелки без тела функции ожидает выражения после жирной стрелки=>.

Вам нужно заключить тело функции в фигурные скобки {...} а также добавьте ключевое слово return для каждого компонента, например:

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;
   };
};