Search code examples
javascripttypescriptspfx

React with TypeScript: State Initiations in constructor

I have a Long form in TypeScript React App, Where we need to hide/show or enable/disable based on value of status.

export interface IState {
  Status: string;
  DisableBasicForm: boolean;
  DisableFeedbackCtrl: boolean;
  DisableTypeofReqCtrl: boolean;
  DisablePurposeCtrl: boolean;
  DisableDutyStation: boolean;
  DisableContractManager: boolean;
  DisableSection: boolean;
  DisableStartDate: boolean;
  DisableEndDate: boolean;
  DisableEstimateDate: boolean;
  DisableTotalBudget: boolean;
  DisableDeliveryDate: boolean;
  DisableWBS: boolean;
  DisableGrant: boolean;
  DisableGrantExpiry: boolean;
  DisableCaseSubmitter: boolean;
  DisablePreparedBy: boolean;
  DisablePreparedDate: boolean;
  ShowSupplyManagerPanel: boolean;
  ShowBudgetOwnerPanel: boolean;
  DisableSupplyManagerPanel: boolean;
  DisableBudgetOwnerPanel: boolean;
}

while in class I need to initiate the State in constructor, what would be best way to do, I don't need to initiate very variable present in IState?

public constructor(props: IGoodsProps) {
    super(props);
//What should be written here, minimal code required.
}
Solution

  • If you're okay with some of the properties having a default value of undefined, you can mark them as optional in IState using ?. For example (I'm picking some properties randomly since I don't know your requirements):

    export interface IState {
  Status: string; // this one is required
  DisableBasicForm?: boolean; // this one is optional
  DisableFeedbackCtrl?: boolean;
  // ...
}

    Then you can omit the optional properties when initializing the state in the constructor.

    Which properties to make optional? If you want any of your booleans to be false by default, in many cases undefined will work instead because undefined is "falsey" in JavaScript. (can go into more detail if this doesn't make sense)