anueAnswer.jsx

/* eslint-disable */
import React, { useState, useContext } from "react";
import "./styles.css";

export const AppContext = React.createContext();

/* 詳見 MD */

function ContextInput() {
  const [context, setContext] = useContext(AppContext);

  return (
    <div>
      <div>Context value: {context}</div>
      <input
        type="text"
        value={context}
        onChange={(e) => setContext(e.target.value)}
      />
    </div>
  );
}

function ContextButton() {
  const [_, setContext] = useContext(AppContext);
  return (
    <button onClick={() => setContext(Math.random().toString())}>
      Generate Random number
    </button>
  );
}

export default function App() {
  /* 詳見 MD */
  const [context, setContext] = useState("0");
  return (
    <AppContext.Provider value={[context, setContext]}>
      <ContextInput />
      <ContextButton />
    </AppContext.Provider>
  );
}