When I try to compile this TypeScript code, it throws an error. Can anyone help me understand why?
import { connect } from 'react-redux';
import React from "react";
import { Link, Redirect } from "react-router-dom";
class HeaderComponent extends React.Component {
render() {
return (
<header>
<div><Link to="">Sign up</Link></div>
<div>{this.props.handleLoginDisplay}</div>
</header>
)
}
}
const mapStateToProps = (state: { showLoginModal: any; }) => {
return {
showLoginModal: state.showLoginModal
}
}
const mapDispatchToProps = (dispatch: (arg0: { type: string; }) => void) => {
return {
handleLoginDisplay: () => dispatch({ type: 'HANDLE_LOGIN_DISPLAY' })
}
}
export default connect(mapStateToProps, mapDispatchToProps)(HeaderComponent);
The compiler is showing the error message: Property 'handleLoginDisplay' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.ts(2339)