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? happy

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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 |

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!

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(