React with TypeScript: State Initiations in constructor

Question

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.
}

GibboK · Answer 1 · 2019-03-15T16:36:34.433

1

If you state implement IState, you would need to initiate each property of IState (based on your logic) because properties in IState are not marked as optional.

Pseudo code example:

public constructor(props: IGoodsProps) {
    const {status} = this.props
     super(props);
     this.state ={
       Status: status,
       DisableBasicForm: status.Status === 'yourValue',
       ... // initialize here
    } 
}

If you have some default value for your state passed as prop you could use object decostructor:

public constructor(props: IGoodsProps) {
    const {status} = this.props
     super(props);
     this.state ={
       ...status,
       DisableBasicForm: status.Status === 'yourValue', // just overwrite this property with your logic
    } 
}

You can also initialize your state outside the costructor:

class Component extends React.Component<Props, State> {
  state: State = {
    Status: 'value',
    ... // initialize here
  }

  constructor(props: Props) {
   ...
  }

If you have some shared logic for setting your state, and do not want repeat yourself you could evaluate using React.useState but you component need to be a function.

edited Mar 15 '19 at 16:36

answered Mar 15 '19 at 08:31

GibboK

71,848
143
435
658

That the thing I don't want, I don't want to add all the state variable, something minimal I need, is it possible?. Currently I am working that way. – Durgesh Mar 15 '19 at 08:46
could you post your props here? – GibboK Mar 15 '19 at 08:52
@Durgesh just added an idea using object decostructor. – GibboK Mar 15 '19 at 10:25
Its not coming from props, Its just I don't want to initialize all the values in constructor because that lots of variable – Durgesh Mar 15 '19 at 14:28
You can also initialize your state outside the constructor, but you still need to initialize your variable. – GibboK Mar 15 '19 at 16:28

score 1 · Accepted Answer · answered Mar 16 '19 at 02:20

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)

React with TypeScript: State Initiations in constructor

2 Answers2