className does not exist on type 'IntrinsicAttributes & Props'

Question

I have two components. One imports another. But typescript throws an error inside Login.tsx, saying:

"Property 'className' does not exist on type 'IntrinsicAttributes & Props'"

Login.tsx:

import React, { ReactElement } from 'react';
import Form from './Form/Form';

import styles from './Login.module.scss';

interface Props {}

function Login({}: Props): ReactElement {
  return (
    <div className={styles.container}>
      <Form className={styles.form}>Form</Form>
    </div>
  );
}

export default Login;

Form.tsx:

import React, { ReactElement } from 'react';

interface Props {
  children: React.ReactNode;
}

function Form({}: Props): ReactElement {
  return (
    <div>
      <h1>TESTY</h1>
    </div>
  );
}

export default Form;

How can I solve it? Thanks in advance for your time!

Answer 1

My favorite way of doing it is

const Login : React.FC<Props> = ({}) => {
  return (
    <div className={styles.container}>
      <Form className={styles.form}>Form</Form>
    </div>
  );
}

export default Login;