Input value doesn't update if new value comes in nextProps

[dzmitry-kremez-itechart]

For example I have cities typeahead input that is updated when user change another zip code input, so I need to set new input value by new property, but as it is based on state it doens't update it. I fixed it in my app by:

<Typeahead
    ...
    ref={(ref) => this.typeahead = ref}
 />

componentDidMount() {
  if (this.typeahead) {
    this.typeahead.componentWillReceiveProps = function (nextProps) {
      this.setState({
        entryValue: nextProps.value,
        visible: this.getOptionsForValue('', nextProps.options),
      });
    };
  }
}

I think this code could be placed inside the src. Is there any reason that why not to update entryValue state from new props?

[Glogo]

This is bugging me for quite some time. For those who prefer different solution (hotfix) this is my suggestion:

• Wrap Typehead into your component and add value as your property
• Implement componentWillReceiveProps and when your value changes, just setState with new entryValue

import { Typeahead } from 'react-typeahead';

class MyTypeahead extends React.Component {
    componentWillReceiveProps(nextProps) {
        if (this.props.value !== nextProps.value) {
            console.log('valueChanged', nextProps.value);
            this.refs.typeahead.setState({entryValue: nextProps.value});
        }
    }

    render() {
        return <Typeahead ref="typeahead" value={this.props.value} />
    }
}

MyTypeahead.propTypes = {
    value: PropTypes.string // Or whatever
};