nextjsとreact日記3～5

3.useStateの使い方は分かったが、useStateが更新されることにより、親要素だと全て再レンダリングされ都合が悪いことが分かった。数字をクリックしても正解、不正解の出し方が分からなかった。

export default function ClientComponent2(){

  const [fisrtNumber, setNumber] = useState(0);

  return (
      <>
      <p>掛け算3の段ノーマル</p>
      <ThreeTablesApp />
      <p>掛け算3の段ノーマルの問題と4つの回答</p>
      <ThreeTablesAndAnswer />

      <button onClick={() => console.log('bbb.tsx が押下されました')}>Click me</button>
      <button onClick={() => console.log('Hello, Client')}>Hello, Client</button>
      <p>Increaseボタンを{fisrtNumber}回クリック</p>
      <button onClick={() => setNumber(fisrtNumber + 1)}>Increase</button>
      </>
  )
}

4.fontawesomeのアニメーションの出し方が分かった。

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faThumbsUp,faPoo } from "@fortawesome/free-solid-svg-icons";

export const Example4 = () => (
  <FontAwesomeIcon icon={faThumbsUp} size="5x" shake style={{color: "blue"}}/>
);
export const Example5 = () => (
  <FontAwesomeIcon icon={faPoo} size="5x" bounce style={{color: "brown"}}/>
);

コンソール内だけだが、正解をクリックすると正解、不正解をクリックすると不正解と出せるようになった。

//正解1つ、間違い3つのランダムに4つの数字を選ぶ関数。戻り値は配列。
const handleClick2 = (answer_num: number, correct_num: number) => {
  if(answer_num === correct_num){
    console.log('正解。' + answer_num + 'がクリックされ、正解は' + correct_num + 'でした')
  } else {
    console.log('間違い。' + answer_num + 'がクリックされ、正解は' + correct_num + 'でした')
  }
}

5.正解をクリックすると、次の問題が出せるようになった。

export const OneQuestionAndAnswer2 = () => {

  const [ques_num, ques_numSet] = useState(0);
      
  return (
          <>
          <p>Child4カウント：{ques_num}</p>
          <div className="FiveTables">
            <p>No {FiveTables[ques_num].id}  :  {FiveTables[ques_num].num1} × {FiveTables[ques_num].num2} = {FiveTables[ques_num].answer}</p>
            <main className="grid grid-cols-4 justify-items-stretch gap-[5px] m-5">
              <FourAnswer_b array_a={Num99s5} num_a={3} num_b={FiveTables[ques_num].answer} ques_num={ques_num} ques_numSet={ques_numSet}/>
            </main>
          </div>
          </>
  );
}

//array_aは配列、Num99s5配列が入る。num_aは間違いの個数が入る、3が指定されている。num_bは正解が入る。
const FourAnswer_b = (props) => {
  const list = RandomSelected(props.array_a, props.num_a, props.num_b);

  list.push(props.num_b);

  const shufflelist = shufflesArray(list); 

  const handleClick4 = (OneTable) => {
    if(OneTable === props.num_b){
      console.log('正解。' + OneTable + 'がクリックされ、正解は' + props.num_b + 'でした');
      props.ques_numSet(props.ques_num + 1); 
    } else {
      console.log('間違い。' + OneTable + 'がクリックされ、正解は' + props.num_b + 'でした')
    }
  };
 
  return (
    <>
    {shufflelist.map((OneTable) => {
      return (
        <button onClick={() => handleClick4(OneTable)}><div className="bg-red-100 p-5">{OneTable}</div></button>
      );
    })}      
    </>
  );
};