#10 【解答編】数字予想ボタンを表示する

この記事は #9 の解答編です。

この記事で紹介するコードは、あくまで一例です。
ご自身で作成されて、すでに問題なく動いているようであれば何も問題ありません。

src/Border7.js

Border7Buttons.js をインポートします。

import Border7Buttons from "./components/Border7Buttons";

関数 getButtons() で、Border7Buttons コンポーネントを返却します。
jsDoc を参考にして、Border7Buttons コンポーネントの props に関数をセットします。

function getButtons() {
   return (
     <Border7Buttons
       onClickOver={checkOver}
       onClick7={check7}
       onClickUnder={checkUnder}
     />
   );
 }

return文で、関数 getButtons() のコメントアウトを解除します。

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

src/components/Border7Buttons.js

・処理詳細を参考にして、props から関数を受け取り、各ボタンに設定する
・各ボタンの名称を設定する

export default function Border7Buttons(props) {
 return (
   <Box display="flex" flexDirection="row" justifyContent="center" mt={1}>
     <Box mx={1}>
       <Button variant="contained" onClick={props.onClickOver}>
         OVER
       </Button>
     </Box>
     <Box mx={1}>
       <Button variant="contained" onClick={props.onClick7}>
         7
       </Button>
     </Box>
     <Box mx={1}>
       <Button variant="contained" onClick={props.onClickUnder}>
         UNDER
       </Button>
     </Box>
   </Box>
 );
}

次回

画面に数字選択ボタンは表示されましたか？
まだ関数 checkOver() などの処理はまだ実装していないので、クリックしても何も起こらない状態です。

次回は、それら関数の処理の実装を行っていきましょう！
次回から進め方を少しリニューアルして、よりサクッと学んでいけるように進めていきますのでお楽しみに！