Argument of type '{}' is not assignable to parameter of type 'T'

[havesomeleeway]

/src/container/Login

import * as React from 'react';
import LoginForm from "../components/login/LoginForm"

const initialState = {
    emailOrPhone: ""
};

/** Prevents direct state manipulation  */
type State = Readonly<typeof initialState>


class Login extends React.Component<State> {
    readonly state: State = initialState;

    render() {
        return (
            <LoginForm
                onChange={this.handleEmailOrPhoneChange}
                onSubmit={this.handleSubmit}
                emailOrPhone={this.state.emailOrPhone}/>
        )
    }

    private handleEmailOrPhoneChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({emailOrPhone: evt.target.value});
    };

    private handleSubmit = (evt: React.ChangeEvent<HTMLInputElement>) => {
        evt.preventDefault();
    };
}


export default Login

I have a container component that supposed to pass state to my dummy component and render it.

Upon npm start i'm thrown this error. The only file on my version control list that is changed is the above container component

Here's my component code for additional information, but I doubt it's necessary.

import * as React from "react";
import { Button, Card, InputGroup } from "@blueprintjs/core";
import companyLogo from "../../styles/assets/imgs/oromico__logo.png";
import { Link } from "react-router-dom";

/** TypeScript Props from package, used for Input component **/
import { IControlledProps } from "@blueprintjs/core";

export interface LoginProps {
  /** Form value of the input, for controlled usage. */
  emailOrPhone: string,
  /** Form value of the input, for controlled usage. */
  onSubmit: React.FormEventHandler<HTMLElement>;
}


const LoginForm = (props: IControlledProps & LoginProps)  => {
  return (
    <div>
        <InputGroup
          name="emailOrPhone"
          type="email"
          placeholder="Email or phone"
          value={props.emailOrPhone}
          onChange={props.onChange}
          large
        />
        </div>
        <div>
            <Button
              rightIcon="arrow-right"
              intent="primary"
              large
              onSubmit={props.onSubmit}
            >
              Next
            </Button>
    </div>
  );
};


export default LoginForm;

[adidahiya]

sorry, which part of this is related to blueprint? this looks like a general typescript issue

[havesomeleeway]

Sorry, I'm still fairly new to TypeScript. I thought it was a util function from within blueprint that was throwing the error

[havesomeleeway]

From what I understand, is an object {} which cannot be assigned as a parameter. If that is the case, how do I assign my State to my component?

Type error: Argument of type '{}' is not assignable to parameter of type 'T'.  TS2345

    100 |     const definedObjB = objB == null ? {} : objB;
    101 | 
  > 102 |     const filteredKeys = _filterKeys(definedObjA, definedObjB, keys == null ? { exclude: [] } : keys);

Do feel free to close this if this is really not the appropriate place to ask this question.