ReactでContext-apiを使うサンプルコード

環境

• React v18

問題点

ReactにはProps機能があり、それを使うとコンポーネント間でデータのやり取りが出来る。

が孫とかまでやりとりしようとすると一気に面倒になる

import type { NextPage } from 'next';
import { useState } from 'react';

const Home: NextPage = () => {
  const [user, setUser] = useState('長門有希');
  return (
    <>
      <h1>{user}</h1>
      <Component1 user={user} />
    </>
  );
};

const Component1 = (props: any) => {
  return (
    <>
      <h1>Component1</h1>
      <Component2 user={props.user} />
    </>
  );
};

const Component2 = (props: any) => {
  return (
    <>
      <h1>Component2 {props.user}</h1>
    </>
  );
};

export default Home;