Reactでおみくじを作っています

React初心者です。

https://newsite-make.com/task-study/app-implementation/のページの一番上におみくじがある(JavaScript)のですがそれをReactで再現しようとしています。

赤丸の中に?があってそれをクリックするたびに大吉、中吉、凶に切り分けようとしているのですが最初が「？」にできなく大吉、中吉、今日のいづれかが表示されていてクリックしてもテキストを変えることができません。

コードをどう変えれば「？」が表示されてクリックするたびにテキストが変わるようになるのでしょうか？

Reactのコードは↓になります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Reactで作ったおみくじ</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.min.css" />
  <link href="./css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div id="root"></div>

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel">

  const TodoApp = () => {
    const point = Math.random();
    
    const [question,setText] = React.useState('?');

    React.useEffect(()=>{
      onClick();
    },[question]);

    const onClick = () => {
      if(point <= 0.3 && point >= 0.1) {
        setText('大吉');
      }
      if(point >= 0.31 && point < 0.5) {
        setText('中吉');
      }
      if(point > 0.51 && point < 0.99){
        setText('凶');
      }
    }

    return(
      <div className="wrap">
        <h2>おみくじ</h2>
        <div id="btn" onClick={onClick}>{question}</div>
      </div>
    );
  };

  
const root = document.getElementById('root');
ReactDOM.render(<TodoApp />, root);

  </script>
</body>
</html>

hoshi-takanori

2021/02/06 06:54

useEffect の部分は不要では。

uheiuhei

2021/02/06 07:02

回答ありがとうございます。 useEffectを取ると一度は変わるのですがクリックするたびに変えることができません。

hoshi-takanori

2021/02/06 07:18

const point = Math.random(); を const onClick = () => { の次の行に持ってくると良いかも。

uheiuhei

2021/02/06 07:24

回答ありがとうございます。クリックするとテキストは変わりますが最初の状態が？ではなく大吉、中吉、凶のどれかになります。

行動規範の内容に同意します

回答1件

追記・修正依頼の箇所で既に答えは出ていますが・・・
以下でどうでしょうか？

js
1const TodoApp = () => {
2
3    const [question,setText] = React.useState('?');
4
5    // useEffectは削除
6
7    const onClick = () => {
8      // Math.random()をonClick内に移動
9      const point = Math.random();
10      if(point <= 0.3 && point >= 0.1) {
11        setText('大吉');
12      }
13      if(point >= 0.31 && point < 0.5) {
14        setText('中吉');
15      }
16      if(point > 0.51 && point < 0.99){
17        setText('凶');
18      }
19    }
20
21    return(
22      <div className="wrap">
23        <h2>おみくじ</h2>
24        <div id="btn" style={{color: "red"}} onClick={onClick}>{question}</div>
25      </div>
26    );
27  };