nextjsとreact日記6～7

6.useStateを再レンダリングしても親要素と子要素では更新される範囲が違うことが分かった。

//親要素
export default function Page() {
  const h1Title = "九九ゲーム"
  const [fisrtNumber, setNumber] = useState(0);

  return (
    <>
    <div className="container m-auto">
      <main className="flex flex-col items-center justify-between p-24">
        <div className='flex-initial w-1600 bg-blue-100'>
          <h1 className="my-4 text-center font-bold text-5xl tracking-tight bg-gradient-to-r from-green-500 via-blue-500 to-pink-500 bg-clip-text text-transparent">{h1Title}</h1>
        </div>
      </main>
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <ClientComponent2 />
      <p>掛け算5の段ノーマルFourTablesApp</p>
      <FourTablesApp />
      <p>掛け算5の段ノーマルの問題と4つの回答</p>
      <FourTablesAndAnswer />
      
      <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>

      <p>掛け算5の段ノーマルの問題と4つの回答を一つずつ</p>
      <OneQuestionAndAnswer />
      <OneQuestionAndAnswer2 />
      </main>
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <p><Link href="/" className="text-2xl font-bold text-red-600">Home</Link></p>
        <p><Link href="/sub1" className="text-2xl font-bold text-red-600">sub1</Link></p>
        <p><Link href="/sub2" className="text-2xl font-bold text-red-600">九九ゲーム</Link></p>
      </main>
    </div>
    </>    
  )
}

//子要素
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>
      );
    })}      
    </>
  );
};

7.useStateの書き方に何種類かあること、引数の順番は逆でもよいことが分かった。

export const Parent = () => {
  const [text, setText] = useState('');

  const [count1, setCount] = useState(123);

  // ↑親コンポーネントで使う：textの初期値とtextを更新する関数を宣言
  // ↓子コンポーネントから受け取った値で親コンポーネントのtextを更新する関数A
  const handleValueChange = (newValue2:any) => {
    setText(newValue2);
  };

  // ↓子コンポーネントから受け取った値で親コンポーネントのtextを更新する関数A
  const handleValueChange3 = (newValue:any) => {
    setCount(newValue + 1);
  };

  const [count4, setCount4] = useState(0);
  const [count5, setCount5] = useState(0);
  const [count6, setCount6] = useState(0);

  return (
    <>
      <p>ああああああああああああ</p>
      <div>
        <Child2 handleValueChange={handleValueChange} />
      </div>
      <div>
        <Child3 count={count1} />
        <ButtonComponent handleValueChange3={handleValueChange3}/>
      </div>
      <div>
        <p>Child4カウント：{count4}</p>
        <Child4 count={count4} setCount={setCount4} />
      </div>
      <div>
        <p>Child5カウント：{count5}</p>
        <Child5 count={count5} setCount={setCount5} />
      </div>
      <div>
        <p>Child6カウント：{count6}</p>
        <Child6 count={count6} setCount={setCount6} />
      </div>
    </>
  );
};

export const Child4 = (props:any)=>{   
// 引数でpropsを受け取る

  const handleClick4 = () => {
   props.setCount(props.count + 1); 
  };
  
  return(
      <>
         <button onClick = {handleClick4}>カウントアップ</button>
      </>
  );
};

export const Child5 = ({setCount,count})=>{   
// 引数で{count, setCount}を受け取る

  const handleClick5 = () => {
   setCount(count + 1); 
  };
  
  return(
      <>
         <button onClick = {handleClick5}>Child5カウントアップ</button>
      </>
  );
};

export const Child6 = ({count, setCount})=>{   
// 引数で{setCount,count}逆の順番で受け取る

  const handleClick6 = () => {
   setCount(count + 1); 
  };
  
  return(
      <>
         <button onClick = {() => {handleClick6()}}>Child6カウントアップ</button>
      </>
  );
};