JSX.Elent' is not assignble to type 'ReactNode' in React Typescript

Question

New to Typescript and React, I'm getting a lint error

Type '({ Token }: { Token: string; }) => JSX.Element' is not assignable to type 'ReactNode'..

 {ClientComponent}

const ClientComponent = ({Token}: {Token: string}) => {
  return (
    <div>
      {Token ? <div>Customer exists</div> : null}
    </div>
  )
}

What is the best way to fix this error? Thank you

{ClientComponent} what is that? Please show where and how you use this component. — kind user
– kind user, Commented Nov 17, 2022 at 18:43
in a function return eg: return ( <div className="relative"> {ClientComponent} </div> ); -- Thanks — goingindie
– goingindie, Commented Nov 17, 2022 at 18:59

Kavinda Jayakody · Accepted Answer · 2022-11-17 19:06:01Z

1

You should use components as Tags, not just by the name

Your code should be changed from

return ( <div className="relative"> {ClientComponent} </div> )

to

return ( <div className="relative"> { <ClientComponent token={ tokenVar } /> } </div> )

Please make sure to change tokenVar to whatever the variable name you have your token.

answered Nov 17, 2022 at 19:01

Kavinda Jayakody

7862 gold badges16 silver badges29 bronze badges

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

5 Comments

Thank you, then I get the following error "Property 'Token' is missing in type '{}' but required in type '{ Token: any; }'"

Sorry I missed that. I've changed the answer. Please make sure to change tokenVar to whatever the variable name you have your token.

And mark the answer as the accepted answer is this solved your issue

It helped not quite solved, gives error "Cannot find name 'myVariable'."

What is myVariable? Where have you used it?