Type 'Element' is not assignable to type 'string' in .tsx file

February 18, 2023

I have this problem to add form element in tsx file.

import { AuthLayout } from "../layout/AuthLayout"

export const LoginPage = () => {
       return (
      <AuthLayout title='Login'>

        <form>
          
          bla bla bla

        </form>

      </AuthLayout>
    ) }

enter image description here

>Solution :

The error message is telling you that the AuthLayout component is expecting a child of type string, but you’re passing it a form instead.

You should change it so that children can be more flexible than that, accepting not only string but also (single or multiple) HTML element(s) and React component(s). You can do that by typing children with React.ReactNode.

export const AuthLayout = ({
  children,
  title,
}: {
  children: React.ReactNode;
  title: string;
}) => {
  // ...
};

*Typing it is as any, like you mentioned in your comment, is not recommended, as it eliminates the main advantage of TypeScript, which is ensuring correct typing during development, before runtime.