In React, why does adding state that is a number to prop that is a number results in string?

Question

If I do the following:

this.setState( { skip: this.state.skip + this.props.PageSize } );

the result is a string, (eg "0555" when it tries to add 5 every click)

During debugging, it shows this.state.skip as a number, but this.props.PageSize as a string. However, the prop is defined as a number:

export interface IMyProps{
  Description: string;
  Context: WebPartContext;
  Environment: string;
  PageSize: number;
}

Do I always have to parse React props? Seems odd.

Edit: trying to do the following:

parseInt(this.props.Pagesize)

fails because, well obviously, you can't parse a number to an int, only a string.

Answer 1

Based on the details you provided, it looks like a logic issue but you can change your code like below to fix this issue

const { PageSize } = this.props;
this.setState(prevState => ({ skip: prevState.skip + parseInt(`${PageSize}`) }));

prevState.skip

We should use function inside setState when new state should be updated based on the current state.

parseInt( ${PageSize} )

This make sure that you are having string value and then parse it to Integer.

This won't be required if you make sure that number is passed instead of string

Answer 2

As commented by patrick :

Anything you pass inside the quote will be string.

myprop="1" // 1 is string here
myprop={1} // 1 is number here

So, you have to use curly brace to use number or variable but not quote.

Hint: You may also use the following to fix your issue:

this.setState( { skip: this.state.skip + +this.props.PageSize } );