How can we initialise a state in react typescript in constructor method, If it has a specific interface type

Question

I have the below Code: Where I have an interface type for a state. How do i initialize it in constructor method. As It doesn't allow me to initialize to string/ null/ number

interface IState { selectedUser?: IUserMenu}

class AssignUser extends React.Component<IProps, IState>{ constructor(props: IProps) { super(props); this.state = { selectedUser: ' what i have to put here' }}}

Also what does it mean by this.state ={} in the constructor function means ?

IUserMenu is an interface, so I cannot initialize to number, '', null,

Only thing I can use Is undefined

The this.state = {} call in the constructor sets the initial state for the component. Perhaps just pass this.state = {} if you don't have an initial value for state.selectedUser -- your interface indicates it is optional. — Jay
– Jay, Commented May 30, 2019 at 12:59

frangaliana · Accepted Answer · 2019-05-30 12:31:01Z

1

Hi @ankitjayaprakash ,

I've an example with your case where I'm initializing the object you want to pass described in the interface (but without being optional)

You can see it here

What "this.state={}" serves in the constructor is only to initialize the state of that component, even though it could be out without any builder function.

edited May 30, 2019 at 12:31

answered May 30, 2019 at 12:25

frangaliana

8039 silver badges17 bronze badges

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

3 Comments

Ankit Jayaprakash Over a year ago

Type 'null' is not assignable to type 'IUserMenu | undefined'. Am getting this error

frangaliana Over a year ago

It works for me without any error on the part of Typescript but if you want better open a CodeSandbox or a StackBlitz and copy all the code. This way we can help you better.

Ankit Jayaprakash Over a year ago

Thanks @fg93 for you effort, I works but I get TSLint suggestion. Thats fine. thanks

Will Jenkins · Accepted Answer · 2019-05-30 12:42:25Z

0

Your IState interface specifies that it has one property called selectedUser that is optional (as it has a ? after it).

If you do provide a selectedUser, it must of type IUserMenu. So your what i have to put here is an object that conforms to the IUserMenu interface.

this.state = {} means initialise the state with the object defined in the braces. In your case the object defined in the braces must match your IState interface (so contain a single property called selectedUser that is undefined of type IUserMenu)

edited May 30, 2019 at 12:42

answered May 30, 2019 at 12:14

Will Jenkins

9,9371 gold badge30 silver badges49 bronze badges

5 Comments

Ankit Jayaprakash Over a year ago

Iam using selectedUser state in the Picker props selectedUser But I need to initialize this state in the constructor But my <item> value is an object In this case what should i have initialized to ?

Will Jenkins Over a year ago

What does the IUserMenu interface look like? And is one of these types passed in as a prop?

Ankit Jayaprakash Over a year ago

interface IUserMenu { name: string; surname: string; }

Will Jenkins Over a year ago

Ok, well it doesn't seem to make sense to me to initialise it to anything... you could just do: this.state = { selectedUser: undefined } or not bother setting the state at all in the constructor

Will Jenkins Over a year ago

Or, you could even intialise it like this: this.state = {selectedUser: { name: "", surname: "" }}

Collectives™ on Stack Overflow

How can we initialise a state in react typescript in constructor method, If it has a specific interface type

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related