arr [Symbol.iterator] не является функцией при использовании useState с контекстом

Question

Я хочу использовать состояние реакции в моем контексте. Это выглядит так:

export const App = () => {
  const [value, setValue] = useState("test");
  return (
    <BrowserRouter>
      <Switch>
        <ViewContext.Provider value={{value, setValue}}>
          <Route path="/" render={(props) => <AdminLayout {...props} />} />
          <Route
            path="/Dashboard"
            render={(props) => <AdminLayout {...props} />}
          />
        </ViewContext.Provider>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

И весь мой экспорт там. Затем я вызываю внутри моего индекса, как это:

ReactDOM.render(
  <App></App>,
  document.getElementById("root")
);

Это работает, если я использую контекст, например: value = "Test", но когда я пытаюсь использовать его с состоянием, он не Работа. Есть идеи?

Answer 1

export const App = () => {
  const [value, setValue] = useState("test");
  return (
    <BrowserRouter>
      <Switch>
        <ViewContext.Provider value={value}> <----- you have to use like this
          <Route path="/" render={(props) => <AdminLayout {...props} />} />
          <Route
            path="/Dashboard"
            render={(props) => <AdminLayout {...props} />}
          />
        </ViewContext.Provider>
      </Switch>
    </BrowserRouter>
  );
}

export default App;