props.children is not defined.

I have this component.

const AuthProvider: Component<AuthContextProps> = (props) => {
  /// the local store.
  const [tokenStorage, setTokenStorage] = createLocalStorage({
    api: localStorage,
    prefix: "vista-auth-",
    deserializer: (data) => {
      if (!data || data == "undefined") {
        return "";
      }
      return data;
    },
    serializer: (value, key, options) => {
      return value;
    },
  });
  const [auth, setAuth] = createStore({
    access: tokenStorage.access,
    refresh: tokenStorage.refresh,
    get authenticated(): boolean {
      const hasAccess = this.access.length > 0;
      const hasRefresh = this.refresh.length > 0;
      return hasAccess || hasRefresh;
    },
  } as AuthState);

  return (
    <AuthContext.Provider value={auth}>
        {props.children!}
    </AuthContext.Provider>
  );
};

const AuthProvider: Component<AuthContextProps> = (props) => {
  /// the local store.
  const [tokenStorage, setTokenStorage] = createLocalStorage({
    api: localStorage,
    prefix: "vista-auth-",
    deserializer: (data) => {
      if (!data || data == "undefined") {
        return "";
      }
      return data;
    },
    serializer: (value, key, options) => {
      return value;
    },
  });
  const [auth, setAuth] = createStore({
    access: tokenStorage.access,
    refresh: tokenStorage.refresh,
    get authenticated(): boolean {
      const hasAccess = this.access.length > 0;
      const hasRefresh = this.refresh.length > 0;
      return hasAccess || hasRefresh;
    },
  } as AuthState);

  return (
    <AuthContext.Provider value={auth}>
        {props.children!}
    </AuthContext.Provider>
  );
};

My IDE is telling me that props.children isn't defined somehow. I'm guessing this is just some typing problem? How would I fix this?

7 Replies

Martnart•2y ago

It comes from your props type. You need to include the children there. <AuthContextProps> also need to have children. Another way, a bit more verbose, would be to have <AuthContextProps & ParentProps> where ParentProps is a built-in that only has children as a prop

Je Suis Un AmiOP•2y ago

Hmm. So, can I just have my Props interface extend ParentProps? Or is that not recommended?

Martnart•2y ago

That I think is purely user-land. Whatever fits your need. ParentProps is just children: JSX.Element nothing you couldn't replicate

Je Suis Un AmiOP•2y ago

Ah. Okay. Much appreciated.

Alex Lohr•2y ago

There's ParentComponent<Props>, too

Je Suis Un AmiOP•2y ago

Oh. Good to know. That’s actually a lot easier. 🙂

Alex Lohr•2y ago

We try to keep our types as helpful as possible. Component means that you define children yourself, ParentComponent is the usual choice for components with children and VoidComponents is for components that would not render elements (so you don't accidentially add them).

Gaming

Programming

props.children is not defined.