React × Typescriptで「式が必要です。ts(1109)」のエラーを解消する方法を教えてください。

Question

実現したいこと

Typescriptで入力フォームを作っており、question.methodの値によってラジオボタン、テキストボックスを設置しようとしています。
以下のエラーの解消法が分からないため、どなたかご指摘ください。

発生している問題・エラーメッセージ

export type Question= {
  questionId: number;   // ID
  questionBody: string; // 質問分
  method: text;            // "text", "radio"
  }[];
};

const QuestionnaireBody = (props: {
  question: Question;
}) => {
  const { question} = props;

  return (
    <>
        <FormControl>
          {
           if ({question.method} === "text") {
            <TextField id="standard-basic" label="Standard" variant="standard" />
           } else if ({question.method} === "radio") {
             <RadioGroup defaultValue="1">
                 <FormControlLabel value=1 control={<Radio />} label="当てはまる" />
                 <FormControlLabel value=2 control={<Radio />} label="当てはまらない" />
                 <FormControlLabel value=3 control={<Radio />} label="どちらとも言えない" />
             </RadioGroup>
           }
          }
        </FormControl>
      </>
    </>
  )

エラーメッセージ

式が必要です。ts(1109)

該当のソースコード

 if ({question.method} === "text") {

即時関数に修正

下記のように即時関数に修正したところ、「型 'void' を型 'ReactNode' に割り当てることはできません。ts(2769)」のエラーが表示された。

  return (
    <>
        <FormControl>
          {
             (() => {
               if ({question.method} === "text") {
                 <TextField id="standard-basic" label="Standard" variant="standard" />
               } else if ({question.method} === "radio") {
                 <RadioGroup defaultValue="1">
                   <FormControlLabel value=1 control={<Radio />} label="当てはまる" />
                   <FormControlLabel value=2 control={<Radio />} label="当てはまらない" />
                   <FormControlLabel value=3 control={<Radio />} label="どちらとも言えない" />
                 </RadioGroup>
               }
          }
        </FormControl>
      </>
    </>
  )

Comments

[hoshi-takanori]

question.method を {} で囲む必要はないのでは…。

[t-4267]

コメントありがとうございます。
{}を外しましたが、エラーは解消されません。。。

[hoshi-takanori]

question が何なのかが分からないと答えようがないですね。
ソースを貼る時は、回答者が問題を再現できるようなもの (変数の宣言の部分や、引数ならどんな値を渡してるかなどが分かるように) を貼って欲しいです。

[t-4267]

ソースコードに追記いたしました。

[hoshi-takanori]

ソースコードありがとうございます。JSX の中に if 文がありますが、{} の中には式を書く必要があるので、三項演算子 ?: を使うか、即時関数にするか、でしょうね。
https://qiita.com/akifumii/items/c302fdc633d8eba2af0a

[t-4267]

ご回答ありがとうございます。
即時関数に修正しましたが、再度エラーが表示されます。
直し方がいけないのでしょうか。

[t-4267]

returnの記述をしていないことが原因でした。
ご回答ありがとうございました！

Answer 1

以下のように即時関数に修正することで解決しました。

  return (
    <>
        <FormControl>
          {
             (() => {
               if ({question.method} === "text") {
                 return <TextField id="standard-basic" label="Standard" variant="standard" />
               } else if ({question.method} === "radio") {
                 return (
                   <RadioGroup defaultValue="1">
                     <FormControlLabel value=1 control={<Radio />} label="当てはまる" />
                     <FormControlLabel value=2 control={<Radio />} label="当てはまらない" />
                     <FormControlLabel value=3 control={<Radio />} label="どちらとも言えない" />
                   </RadioGroup>
                 );
               }
          }
        </FormControl>
      </>
    </>
  )