useContextとuseStateを一緒に使いたい

Question

実現したいこと

React学習中で、アプリの作成をしています。
useContextで渡したstateの値を、受け取り先のコンポーネントで更新したいと考えております。

前提

Index.jsxというファイル上で作成したuseStateをuseContextを使用して別のコンポーネントへ渡し、受け取ったコンポーネント上でstateの更新を行いたいと考えています。
更新を行う際に格納したい値は、item変数に入っているオブジェクトの数を数えて、その数字を入れたいと考えています。
itemはユーザーの操作次第で入っているオブジェクトの数が変わるので、変わるたびに数を検知してその数をstateに格納したいです。

調べながら書き方を変えて試しているのですが、うまくいく方法が見つかりません。
ソースコードなどをみて、なにかおわかりになる方がいらっしゃいましたらご教授いただきたいです。

発生している問題・エラーメッセージ

該当のソースコードに記載してあるコードを実行した場合は以下のエラーメッセージが表示されます。

setFavNumber is not a function

該当のソースコード

export const NumberContext = createContext();

const App = () => {
  const [number, setNumber] = useState();
  const value = { number, setNumber };

  return (
    <NumberContext.Provider value={value}>
      <React.StrictMode>
        <RouterProvider router={router} />
      </React.StrictMode>
    </NumberContext.Provider>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(<App />);

export default NumberContext;

const { favNumber, setFavNumber } = useContext(NumberContext);
  useEffect(() => {
    setFavNumber(item.length);
}, [item]);

試したこと

ソースコードではvalue変数に{ number, setNumber }を格納しているのですが、NumberContext.Providerのvalueに直接{ number, setNumber }を挿入してみたのですが、結果は同じでした。

該当のソースコードから、どのように修正すれば受け取り先のコンポーネントで値の更新を行うことができるのか、なにかお分かりになる方がいらっしゃいましたら教えていただけると幸いです。
よろしくお願いいたします。

Answer 1

NumberContext.Providerのvalueに直接{ number, setNumber }を挿入してみたのですが、結果は同じでした。

読み取る方でも numberとsetNumberという名前を使ってください。

const { favNumber, setFavNumber } = useContext(NumberContext);というように、無関係なプロパティで参照した場合、取れるのはundefinedです。

Comments

[ARIA-0]

同じ名前を使用してみたところ正常に動作させることができました！
ありがとうございます！