relation between reactjs ,setState, Interface props and Interface state with respect to typescript , how can I use setState?

Question

I have never used Typescript, Trying to understand how this works

This problem is very basic and may be simple but I didn't find any resource only which can help me with this.

Problem: I want to setState the StationDefs which is not present in StationListState but present in StationListProps, do I need to add it in the StationListState? or Import it somehow from Station.ts and it will work

when I try to set the state in componentDidMount it gives me following error

---

Argument of type '{ StationDefs: any; }' is not assignable to parameter of type 'StationListState | ((prevState: Readonly, props: Readonly) => StationListState | Pick<...>) | Pick<...>'. Object literal may only specify known properties, and 'StationDefs' does not exist in type 'StationListState | ((prevState: Readonly, props: Readonly) => StationListState | Pick<...>) | Pick<...>'.ts(2345)

---

I have 5 files as below

1. StationList.tsx

 class StationListComponent extends React.Component < StationListProp, StationListState > { constructor(props: StationListProp) { super(props); this.state = { stationOnline: false, stationId: 0, appId: 0, activities: { selectedRow: [], } } } //I want to add following method to fetch data and allocate response to stationDefs componentDidMount() { //want to fetch data, which has Json objectArray with StationDefs content //how can i setState StationDef here? let data = [obj1, obj2, obj3]; this.setState({ stationDefs: data }); } render() {} }

2. StationListState

 interface ActivitiesType { selectedRow: Array < number | string >; } export interface StationListState { stationOnline: boolean; stationId: number appId: number; activities: ActivityType; }

3. StationListProps

 //import {IStationDef} from Station.ts export interface StationListProp { stationDefs: IStationDef[]; }

4. Station.ts

 import { IEnumInterface, IEntityObj } from 'index'; export interface IStationDef { StationVersionStatus: ICommonEnumInterface allowedUserTypes: ICommonEnumInterface; appDef? : IEntityObject; appId? : number; timestamp: string; }

5. index.ts

 export interface IEnumInterface { stationVersionId: number; stationDescription? : string; stationName: string; } export interface IEntityObj { id: number; name: string; type? : ICommonEnumInterface; }

Answer 1

export interface StationListState {
  StationOnline: boolean;
  stationId: number
  appId: number;
  Activities: ActivityType;
}

Can you change StationOnline to stationOnline and Activities to activities?