[BUG] - I'm having an issue with changing value dynamically

[Myzel394]

I want to dynamically change the value to a default value I made when I click on a button.

My code looks like this:

const numberDefault = 1;
const [enteredNumber, setEnteredNumber] = useState(numberDefault);
const resetInputHandler = () => {
    setEnteredNumber(numberDefault);
}


<NumericInput
        value={enteredNumber}
        ... />
<Button title="Reset" onPress={resetInputHandler} />

[strdr4605]

Looks like NumericInput do not rerender when value prop is changed.

I have a similar issue

const [gratuityAmount, setGratuityAmount] = useState<number>(0);

  function onNumericInputChange(value: number): void {
    const valueInCurrency: number = Number(value.toFixed(2));
    setGratuityAmount(valueInCurrency);
  }

<NumericInput
            value={gratuityAmount}
            minValue={0}
            maxValue={10000}
            step={0.25}
            onChange={onNumericInputChange}
            ...
          />

If the user inputs 3.777 gratuityAmount is set to 3.78 but the input value is not updated to 3.78 but remains 3.777 and user can type next 3.77777777

[Tyak99]

I am having the same issue. When props.value changes, The NumericInput state.value does not update. NumericInput rerenders, but the value of state.value remains the same. Checking for that in the NumericInput component would solve for it. Something like:

 componentDidUpdate(prevProps) {
        if (prevProps.value !== this.props.value) {
            this.setState({
                value: this.props.value,
                lastValid: this.props.value,
                stringValue: this.props.value.toString()
            });
        }
    }

[himelbrand]

I am having the same issue. When props.value changes, The NumericInput state.value does not update. NumericInput rerenders, but the value of state.value remains the same. Checking for that in the NumericInput component would solve for it. Something like:

 componentDidUpdate(prevProps) {
        if (prevProps.value !== this.props.value) {
            this.setState({
                value: this.props.value,
                lastValid: this.props.value,
                stringValue: this.props.value.toString()
            });
        }
    }

did you test it and it worked?

btw, sorry for taking so long to respond I was busy with school

[Tyak99]

That's okay @himelbrand . Yes I tested it and it worked. Updating the state when props.value changes fixed the issue.

[mthomas-github]

this doesn't work if you set a initValue, and then decrease it will reset the number to 1, this only fixes if you increase with initValue.

[seftonmonk]

If you want to reset the number [the value prop] dynamically, you need to have a initialValue prop set inside the <NumberInput/> component. Not sure why, but it is what it is.

<NumericInput initValue={0}/>

[pnaa]

I am having the same issue. When props.value changes, The NumericInput state.value does not update. NumericInput rerenders, but the value of state.value remains the same. Checking for that in the NumericInput component would solve for it. Something like:

 componentDidUpdate(prevProps) {
        if (prevProps.value !== this.props.value) {
            this.setState({
                value: this.props.value,
                lastValid: this.props.value,
                stringValue: this.props.value.toString()
            });
        }
    }

This workaround worked for me. Thks

[phongbksneep]

I am having the same issue. When props.value changes, The NumericInput state.value does not update. NumericInput rerenders, but the value of state.value remains the same. Checking for that in the NumericInput component would solve for it. Something like:

 componentDidUpdate(prevProps) {
        if (prevProps.value !== this.props.value) {
            this.setState({
                value: this.props.value,
                lastValid: this.props.value,
                stringValue: this.props.value.toString()
            });
        }
    }

It's right, you can try this

    <NumericInput
        value={0}
        initValue={enteredNumber}
    ... />

[davidburson]

Here is the complete componentDidUpdate that is working for me. I added the else if section:

componentDidUpdate() {
    const initSent = !(this.props.initValue !== 0 && !this.props.initValue);

    // compare the new value (props.initValue) with the existing/old one (this.state.value)
    if (this.props.initValue !== this.state.value && initSent) {
        this.setState({
            value: this.props.initValue,
            lastValid: this.props.initValue,
            stringValue: this.props.initValue.toString()
        });
    } else if (!initSent && this.props.value !== this.state.value) {
        this.setState({
            value: this.props.value,
            lastValid: this.props.value,
            stringValue: this.props.value.toString()
        });
    }
}