Clash Royale CLAN TAG#URR8PPP

TypeScript React setState is not working

I have a component with input like this

import * as React from 'react'

import InputNumber, Button from 'antd'

interface IProps
value: number


interface IState
value: number


class ConfirmInput extends React.Component<IProps, IState>
public readonly state =
value: 0


static getDerivedStateFromProps = ( value : IProps) => ( value )

public render ()
return (
<div>
<InputNumber
value=this.state.value
formatter=value => `$ $value`.replace(/B(?=(d3)+(?!d))/g, ',')
parser=(,*)/g, '')
onChange=(value: number) =>
console.log('value', value)
this.setState( value )

/>
<Button
onClick=() => console.log('this.state.value', this.state.value)
type="primary"
>
Bid
</Button>
</div>
)



export default ConfirmInput


on the InputNumber I have on change and that gets a number as a value, however this.setState doesn't change the value.
There are no compiler errors and everythings seems to be ok with types.
What am I missing in here?

InputNumber

this.setState

getDerivedStateFromProps

onConfirm

getDerivedStateFromProps

1 Answer
1

You'll need to store the original value in the state so that your getDerivedStateFromProps implementation can overwrite the current value only when the prop changes. This should hopefully work (not tested):

getDerivedStateFromProps

interface IState
value: number
origValue: number


class ConfirmInput extends React.Component<IProps, IState>
// ...
static getDerivedStateFromProps = (props: IProps, state: IState) =>
(props.value != state.origValue ? origValue: props.value, value: props.value : )
// ...



By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.