[BUG] - Value doesn't change when component parent is rendered

[simo385]

Hi guys,

I have NumericInput component inside another one with the following structure:

Class Product {
    this.state = {
        quantity: 2;
    }
render(){
    return (<View>....</View>
    <NumericInput
       ...
        value={this.state.quantity}
        onChange={...} />)
    }
}

As the Produc is rendered, because of quantity state update, NumericInput doesn't render itself. Inside the NumericInput I see the old quantity value.

I'd like the quantity value is rendered inside NumericInput component as well.

Enviorment (please complete the following information):

• Version: 1.8.3
• React Native version: 0.61
• Device: Android 7

Can I solve the bug? Any workaround?

Thanks in advance, Simone

[simo385]

Hi Everybody,

any updates?

Thanks in advance, Simone

[ErkanGorgulu]

Did you try giving an initial value ? <NumericInput value={selectedItemAmount} onChange={setselectedItemAmount} initValue={selectedItemAmount} />

[simo385]

Hi @ErkanGorgulu,

yes, I tried, but it doesn't work.

Simone

[a777med]

Hi,

Add this to the NumericInput component (NumericInput.js) and it will work just fine.

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

[a777med]

Also, I think this PR #56 will solve this issue, too.

[simo385]

Hi,

Add this to the NumericInput component (NumericInput.js) and it will work just fine.

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

Hi @a777med,

I did it, but doesn't work.

Many thanks for your support. Simone

[huy-lv]

@simo385 how did you resolve it

[pooryamd]

Hi,

Add this to the NumericInput component (NumericInput.js) and it will work just fine.

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

This one worked for me like a charm :) My module code:

// this.props refers to the new props
componentDidUpdate(prevProps) {
    const initSent = !(this.props.initValue !== 0 && !this.props.initValue); 
      if (prevProps.value !== this.props.value) {
        this.setState({
          value: this.props.value,
          stringValue: this.props.value.toString(),
        });
      }
    // 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()
        });
    }
}