define function with html output in React with Typescript

Question

I want to define class in React with Typescript which has a method with html output. but get error about output type of function.

interface StateProps {
  page: string,
}
class App extends React.Component<StateProps,any> {
render() {
    return (
      <div className="App">
        {this.pageContent(this.props.page)}
      </div>
    );
}
pageContent = (page:string) => {
    switch (page) {
      case "newPage":
         return <NewPage />;

      case "otherPage":
         return <OtherPage />;

      default:
        break;
    }
  }
}

error was: Type 'void' is not assignable to type 'ReactNode'.

eslint suggest use DetailedHTMLProps<HtmlAttributes<HTMLDivElement>,HTMLDivElement> but it didnt work.

Esben Andersen · Accepted Answer · 2019-05-01 10:33:12Z

5

if you have @types/react in your package.json you should be able to do

pageContent = (page:string): ReactNode | null => { 
  ... 
}

You probable want to return null instead of breaking. Typescript doesn't like types with optional return.

edited May 1, 2019 at 10:33

answered May 1, 2019 at 9:22

Esben Andersen

8232 gold badges10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mohsen shabanian Over a year ago

this made new error: Cannot invoke an object which is possibly 'null' or 'undefined'.

Esben Andersen Over a year ago

Can you provide a stacktrace ?

mohsen shabanian Over a year ago

Cannot invoke an expression whose type lacks a call signature. Type 'string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | ReactNodeArray | ReactPortal' has no compatible call signatures.  TS2349

Esben Andersen Over a year ago

That must be an error in another part of your code. Maybe where you use the App component, or in one of the child components.

mohsen shabanian Over a year ago

you said true. make project again and problem solved. thanks

Collectives™ on Stack Overflow

define function with html output in React with Typescript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related