#13 React.js でプログラミング・プラモデル Vol.2 「Border7」：数値の判定結果を出力する②

これまで

前回は、画面にメッセージを表示するための事前準備として、Message コンポーネントの実装をしました。

現時点のコード

前回までの工程で出来上がるコードは以下です。
はじめましての方はこの sandbox 上でコーディングしてみてください。

#12 after - CodeSandbox

今回のタスク

・Message コンポーネントをインポートする
・関数 getMessage() の処理を実装する
・関数 getMessage() を呼び出して画面にメッセージを出力する

では、早速始めましょう！

Message コンポーネントをインポートする

src/Border7.js を開いてください。
関数 getMessage() は、戻り値として Message コンポーネントを返却します。インポートしておきましょう。

関数 getMessage() の処理を実装する

関数 getMessage() を見つけてください。

  /**
  * メッセージ取得関数
  *
  * 処理概要
  *  - 現在のゲーム進行に従って、画面に表示するメッセージコンポーネントを返却する
  *
  * 処理詳細
  *  - state isGameFinished が true の場合
  *     - 'Thank you for playing!', `Win: ${winCount} Lose: ${loseCount}` を配列に追加する
  *  - state answered が true かつ isWin が true の場合
  *     - 'Win!' を配列に追加する
  *  - state answered が true かつ isWin が false の場合
  *     - 'Lose!' を配列に追加する
  *  - それ以外の場合
  *     - 'Over or Under?' を配列に追加する
  *
  * @return {component} <Message />
  */
 function getMessage() {}

jsDoc の処理詳細を参考にして、処理を実装してください。
Message コンポーネントでは、メッセージを props.children で受け取っていたことを思い出してください。

関数 getMessage() を呼び出して画面にメッセージを出力する

関数 getMessage() の実装ができたら、実際に呼び出して画面に出力してみましょう。
return文のコメントアウトしている箇所を修正してください。

  return (
   <Box>
     <PlayArea card={card} />
     <Box /* className={classes.messageArea} */>
       {/* getMessage() から返却されるコンポーネント */}
       {getButtons}
     </Box>
   </Box>
 );

完成イメージ

今回のタスクの実装例を以下に示します。

#13 after - CodeSandbox

エラー：Functions are not valid as a React child.

実装例ではすでに修正済みですが、前回までのコードで実装すると上記見出しのエラーが発生します。

これは src/Border7.js のreturn文で 関数 getButtons() を呼び出す際に「 () 」を付けていないために発生したエラーです。

  return (
   <Box>
     <PlayArea card={card} />
     <Box className={classes.messageArea}>
       {getMessage} // () をつけていない
       {getButtons} // () をつけていない
     </Box>
   </Box>
 );

上記エラーを訳すと以下のような意味になります。

関数は、React の 子要素としては無効です。

「 () 」を付けていないため、関数そのものを返却していることになり、関数は実行されません。
このreturn文で返却したいものは、関数ではなく、関数を実行して返却されたコンポーネントです。
このようなエラーが発生した場合は「関数そのものを返却していないか」ということを確認してみましょう。

エラー解消のいい例になったと思いつつ、間違った例を提示してしまいました。
お詫びして訂正いたします。

次回

今回のタスクを実装することで、メッセージが出力されるようになり、だいぶゲームらしくなってきましたね！
次回はゲーム進行ボタン（次の数字予想をするためのボタン）を実装します！