React/TypeScript error: Operator '<' cannot be applied to types 'boolean' and 'RegExp' [closed]

Question

Here is my LoginContainer.ts Not sure why I'm getting these typescript errors in my render method:

import * as React from 'react';
import { connect } from 'react-redux';

// Actions
// import { addCoins } from 'actions/coins';

interface IProps {
  loginActions: any
}

interface IState {
  email: string;
  password: string;
}

class LoginContainer extends React.Component<IProps, IState> {

  public state: IState = {
    email: '',
    password: ''
  };

  public render() {
    return (
      <div id="login-container">
        <h1>Login</h1>
      </div>
    );
  }
}

// const mapDispatchToProps = dispatch => ({
//   addCoins: (...args) => dispatch(addCoins(...args))
// });

export const LoginContainerJest = LoginContainer;

export default connect(null, null)(LoginContainer);

Answer 1

Typescript supports JSX syntax but requires a different extension .tsx. Renaming your file to LoginContainer.tsx should allow typescript to interpret the syntax properly.

From the typescript handbook:

In order to use JSX you must do two things.

1. Name your files with a .tsx extension

2. Enable the jsx option (in your tsconfig file)