I have below code
const pageArea = (Component,title) => ({ ...props }) => {
<Component {...props} />
}
This is working fine in js, but I want to change this to typescript
I tried like this
function ErrorFallback({error, resetErrorBoundary}) {
return (
<div role="alert">
<p>Something went wrong:</p>
<pre>{error.message}</pre>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
)
}
const pageArea = (Component:ReactNode,title:String) => ({ ...props }) => {
return (
<>
{/* <Header pTitle= {title} /> */}
<div>
<ErrorBoundary FallbackComponent={ErrorFallback}>
{Component ? <Component {...props} /> : null}
</ErrorBoundary>
</div>
</>
);
};
But its not working,,, typescript saying error of any type
Can someone help me converting that to typescript, also I am finding it difficult to understand this arrow function syntax... if someone can suggest any link to understand that will be great...
Thanks
There are many options to do, for example, you could define your type outside of the component and then pass it to the component:
First, you need to import the proper type from the react library
import React, {FunctionComponent, ReactNode} from 'react';
Now, you could define your types with interface which came from TypeScript:
interface PageAreaProps {
children: ReactNode;
title: string;
}
Finally, apply that interface into your component:
const PageArea: FunctionComponent<PageAreaProps> = ({children, title}) => { // rest of the codes}
Note: always use uppercase for the first letter of your component names.
import { FunctionComponent } from "react";
interface Props {
title: string
}
const pageArea = (Component: FunctionComponent<Props>, title: string) => () => {
return <Component title={title} />
}
function Test ({ title }: Props) {
return <h1>{title}</h1>
}
export default function App() {
return (
<div className="App">
{pageArea(Test, 'some')()}
</div>
);
}