Typescript error - Unable to find react context in wrapped child component

Question

I'm trying to dynamically set context in a parent component from a child component using this post as a guide

Here's my App.tsx:

export interface User {
  username: string;
}

export interface iUserContext {
  users: User[];
  setUsers: React.Dispatch<React.SetStateAction<User[]>>;
}

function App() {
  const [users, setUsers] = useState<User[]>([]);
  const value = { users, setUsers };

  // set defaults
  const UsersContext = createContext<iUserContext>({
    users: [],
    setUsers: () => {},
  });

  return (
    <div className="App">
      <Router>
        <UsersContext.Provider value={value}>
          <Layout>
            <Switch>
              <Route path="/generated-links">
                <GeneratedLinks />
              </Route>
              <Route path="/">
                <GenerateLinks />
              </Route>
            </Switch>
          </Layout>
        </UsersContext.Provider>
      </Router>
    </div>
  );
}

Then, in GenerateLinks.tsx:

const GenerateLinks = () => {
  const history = useHistory();
  const { users, setUsers } = useContext<iUserContext>(UsersContext);

The error I'm getting is for the UsersContext argument, just here ^:

Cannot find name 'UsersContext'. Did you mean 'useContext'?

I haven't used useContext and TS together before, so maybe I'm missing something obvious, but it seems like TS isn't detecting that I'm wrapping this component with the users context provider and passing in. Any ideas?

you should create context outside of your component and export its instance to children as useContext arguments — Vasyl Butov, Feb 05 '21 at 14:42
move the context creation out of the component, React is thinking that you are using a hook and is suggesting this. — Gabriel Alcântara, Feb 05 '21 at 14:44

score 1 · Accepted Answer · answered Feb 05 '21 at 14:43

UsersContext should be outside the App component and marked for export.

export interface iUserContext {
  users: User[];
  setUsers: React.Dispatch<React.SetStateAction<User[]>>;
}

export const UsersContext = createContext<iUserContext>({
  users: [],
  setUsers: () => {},
});

function App() {
  const [users, setUsers] = useState<User[]>([]);
  const value = { users, setUsers };

  return (
    <div className="App">
      <Router>
        <UsersContext.Provider value={value}>

Then, you can import it in GenerateLinks:

import { UsersContext, iUserContext } from './App'

Typescript error - Unable to find react context in wrapped child component

1 Answers1