Тип '() => Элемент' не может быть назначен типу 'строка'

Question

Приветствую!

У меня обычный function и я возвращаю span с prop(если не ошибаюсь). В моем коде TS у меня есть эта ошибка

Изображение ошибки

Вот мой код. Имя файла qCard.tsx

      import { QuestionAnswerTwoTone } from "@material-ui/icons";
import React from "react";

// crear props
type Props = {
  question: string;
  answers: string[];
  callback: any;
  userAnswer: boolean;
  questionNm: number;
  totalQuestions: number;
};

// A function statement declared component that takes no children.
export default function QuestionCard({
  question,
  answers,
  callback,
  userAnswer,
  questionNm,
  totalQuestions,
}: Props) {
  //duda
  return (<div>
      <p> Question :  {questionNm} / {totalQuestions} </p>
      <p dangerouslySetInnerHTML={{ __html: question }} />
      <div>
          {answers.map(function answer(){
              return(  <div>
                <button disabled={userAnswer} onClick={callback}>
                    <span dangerouslySetInnerHTML={{ __html: answer }}/>
                </button>
            </div>);
          } )}
      </div>

  </div>
    
        );
}

(Строка ошибки)

Я пытался удалить {{ **__html**: answer }} оставив это как: {{ answer }} но это не работает.

Answer 1

Это потому, что вы используете имя функции (элемент в React) для __html:

      answers.map(function answer(){
 //    __html: answer ^^

Вместо этого используйте функцию стрелки:

      answers.map(answer => {
  // __html: answer // now it works.

Или, если вы хотите продолжить использование оператора функции, вы можете передать параметр и использовать:

      answers.map(function answer(ans){
  // __html: ans