React / Metronic 8 | Understanding the {children} prop in AuthProvider etc.
I have decided to reverse engineer the React version of Metronic 8 in order to get a better understanding of the codebase and setup.
However, I am having trouble understanding the props in AuthProvider.
I have added the following code in my index.ts:
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<AuthProvider>
<AppRoutes/>
</AuthProvider>
</QueryClientProvider>,
</React.StrictMode>
);However, in AuthProvider I'm getting the error:
TS2559: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.
In AuthProvider I'm getting the error TS2339: Property 'children' does not exist on type '{}'.
Authprovider code:
export const AuthProvider: FC = ({children}) => {
// console.log("children");
const [auth, setAuth] = useState<AuthModel | undefined>(authHelper.getAuth())
const [currentUser, setCurrentUser] = useState<UserModel | undefined>()
const saveAuth = (auth: AuthModel | undefined) => {
setAuth(auth)
if (auth) {
authHelper.setAuth(auth)
} else {
authHelper.removeAuth()
}
}
const logout = () => {
saveAuth(undefined)
setCurrentUser(undefined)
}
return (
<AuthContext.Provider value={{auth, saveAuth, currentUser, setCurrentUser, logout}}>
{children}
</AuthContext.Provider>
)
}From the demo version (your version) I can via help my from IDE that the type of the prop "children" in AuthProvider is a ReactElement.
How do I get this working? What am I missing?
Replies (7)
Failed to compile.
/home/fize/Downloads/metronic_v8.0.38/react/demo1/src/_metronic/helpers/components/KTCard.tsx
TypeScript error in /home/fize/Downloads/metronic_v8.0.38/react/demo1/src/_metronic/helpers/components/KTCard.tsx(35,5):
Property 'children' does not exist on type 'Props'. TS2339
33 | utilityPY,
34 | utilityPX,
> 35 | children,
| ^
36 | } = props
37 | return (
38 | <div
Hi,
For now, try to re-setup your application with following the instructions https://preview.keenthemes.com/metronic8/react/docs/docs/quick-start.
Regards,
Keenthemes support
Seriously? Did you even read my question?
I've answered to Shai Ohev
He has the issue, cause the React team released React v17 with changes in React types and issues with backward compatibilities (cause of that we are asking to update yarn.lock file in our instructions and it will solve the issue Property 'children' does not exist on type 'Props'.).
Another way is to add children as a prop: https://bobbyhadz.com/blog/react-property-children-does-not-exist-on-type.
Regards,
Keenthemes support
Ok, I was just confused why he made a reply on my post for something that wasn't relevant to my question at all.
Anyhow, with relations to your latest answer:
I've seen something similiar trying to debug the issue on google.
My problem with your code is, that I cant find anywhere a place where you define this type and/or interface like in his codeexample:
type BoxProps = {
name: string;
country: string;
children: React.ReactNode; // 👈️ added type for children
};Where in the code do you have that children: React.ReactNode?
We don't have it.
Cause before in React v17.x.x children: React.ReactNode was a part of React.FC. And now in the React v18.x.x React team did changes in React types and removed it from React.FC.
With the incoming release of Metronic v8.1.0, we will have the full support of React18. But for now, you can use our temporary yarn.lockfile or add children: React.ReactNode by yourself.
Regards,
Keenthemes support
Sorry! thought this was related!
