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

CodePudding user response：

There is two way to pass prop types in react typescript

Using Type

import React from "react"
import ReactDOM from "react-dom"

type PropType = { name: string, age: number }

const User = ({name, age}: PropType) => {
     return (
        <div>
           <h1>{name}</h1>
           <p>{age}</p>
        </div>
     )
}


ReactDOM.render(<User name={"Nick"} age={16}/>, document.getElementById("root"))

React.FC

import React from "react"
import ReactDOM from "react-dom"

interface PropType {
    name: string
    age: number
}

const User: React.FC<PropType> = ({name, age}) => {
     return (
        <div>
           <h1>{name}</h1>
           <p>{age}</p>
        </div>
     )
}


ReactDOM.render(<User name={"Nick"} age={16}/>, document.getElementById("root"))

if you dont want to pass someone them in props your can use in interface or type question mark keyword which ignores prop, if it isnt passed there

interface PropType {
    name?: string
    age?: number
}

or

type PropType = { name?: string, age?: number }

CodePudding user response：

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.

CodePudding user response：

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>
  );
}