How to set state for individual state variable in react + typescript?

Question

when I click button, "isLoading" set to true and loading gif seems in page, process simple here its click function;

private clickFunction(e): void {
    this.state.isLoading=true; ..

so i expect this loading gif seems in page;

<div style={{"display":this.state.isLoading?"block":"none"}}><i className="fa fa-spinner fa-spin"></i></div>

but its not working.. whats wrong here? since if initial value of isLoading property set as true, gif seems on plageload so whats I think state not updating the render or ?

EDITED : When I try to update only one property of state ts compiler throws this exception; Whats worng with here ?

export interface IWebPartState {
  status: string;
  Name: string;
  isLoading:boolean;
}
export default class Contact extends React.Component<IContactProperties, IWebPartState> { ...

this.state.isLoading=true is wrong. instead use setState — jose920405
– jose920405, Commented Jan 31, 2017 at 12:36
@jose920405 where if there is many properties? do I have to set others also ? how can I edit individual property of state? — TyForHelpDude
– TyForHelpDude, Commented Jan 31, 2017 at 13:05

Hardik Modha · Accepted Answer · 2017-01-31 13:49:14Z

2

You are setting state in a wrong way, Instead of doing this.state.isLoading=true, you should set state using setState as follows,

this.setState({
    isLoading: true
});

Read more about state here and setState here.

Edit: As you are using reactjs with typescript, You will need to make property optional in the type interface and you can do that using ?. Read more about it in optional properties section here

interface IGifLoadingState {
    isLoading?: boolean;
    status?: string;
}

After declaring properties optional, typescript will allow you to set any individual property in the state.

edited Jan 31, 2017 at 13:49

answered Jan 31, 2017 at 12:43

Hardik Modha

12.8k3 gold badges40 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

TyForHelpDude Over a year ago

but i have many properties in state, and i think seting single property of state is not possible, is it?

tegon Over a year ago

@TyForHelpDude setState will only update the properties you pass to it.

Hardik Modha Over a year ago

Yes, You can pass individual property, that you want to set.

Hardik Modha Over a year ago

@TyForHelpDude Here I've created a little example for you. You'll need to open browser console to see the results.

TyForHelpDude Over a year ago

@HardikModha ty for answer and example actually you done the part of the origin of the post but still confusing about setting single property of state. can you check you post

|

Vinzzz · Accepted Answer · 2017-11-09 14:05:22Z

2

This seems to have changed since...

If you look at React type definitions (index.d.t, React 16), you see that setState method signature in Typescript is :

class Component<P, S> {
...
  setState<K extends keyof S>(state: Pick<S, K>, callback?: () => any): void;
...
}

Sis our component state, in your case it's IWebPartState

Look at this SO question to understand what it means, but to make it short: you don't have to make your interface properties optional, yet you can pass only a subset of them to setState

edited Nov 9, 2017 at 14:05

answered Nov 9, 2017 at 13:58

Vinzzz

11.7k5 gold badges38 silver badges42 bronze badges

Collectives™ on Stack Overflow

How to set state for individual state variable in react + typescript?

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related