Error: Argument of type '{ field1: Date; field2: Date; }' is not assignable to parameter of type 'IMyInterfaceState

Question

My interfaces (.tsx) are given below:

export interface IMyInterfaceProps{
}

export interface IMyInterfaceState{
    fields: {
        ID:string,
        Name:string,
        field1: Date,
        field2: Date,
        date: Date
    },
    errors: {
        Name: string,
      }
}

My Class (.tsx) is:

class MyClass extends Component<IMyInterfaceProps, IMyInterfaceState>{
   form:any;
   constructor(props:any){
      super(props);
      this.state = {
      fields: {
        ID:'',
        Name:'',
        field1: new Date(),
        field2: new Date(),
        date: new Date()
      },
      errors: {
          Name: '',
      }
    };
   }

   change = (e:any) => {
      this.setState({
        [e.target.name]: e.target.value} as Pick<IMyInterfaceProps, keyof IMyInterfaceState>);
   };

   handleChange = (date: Date) => {
      this.setState({
         field1: date,  //Here I'm getting this error
         field2: date
      });
    };

  render(){
      <div>
             <DatePicker id='field1' className="form-control" onChange={this.handleChange}
                     placeholderText="Select a date" ></DatePicker>
       </div>
  }
}

My dependencies from package.json are:

{
  "name": "react-ds-poc",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.26",
    "@types/react-dom": "^16.9.0",
    "bootstrap": "^4.4.1",
    "css-loader": "^3.4.2",
    "react": "^16.13.1",
    "react-datepicker": "^2.14.1",
    "react-dom": "^16.13.1",
    "react-form-input-validation": "^2.0.3",
    "react-scripts": "3.4.1",
    "typescript": "^3.8.3"
  }

I tried couple of solutions available for this problem from here and I could solve it for my change event but for the handleChange event I get the following error:

Argument of type '{ field1: Date; field2: Date; }' is not assignable to parameter of type 'IMyInterfaceState | ((prevState: Readonly, props: Readonly) => IMyInterfaceState | ... 1 more ... | null) | Pick<...> | null'.
Object literal may only specify known properties, and 'field1' does not exist in type 'IMyInterfaceState | ((prevState: Readonly, props: Readonly) => IMyInterfaceState | ... 1 more ... | null) | Pick<...>'.

Please help me get rid of from this error.

Answer 1

You're currently replacing your entire state object with the contents of only your fields property. You need to set state with an object that fulfills the contract of IMyInterfaceState. Not totally certain, but you might be able to get away with

this.setState({
  fields: {
    field1: date,
    field2: date
  }
});

but you may have to define ID, Name, date and perhaps errors.Name, too.