Cannot change the options list after the component has been rendered

[TomCaserta]

Currently attempting to modify the options prop with my list in however it does not seem to work. I am loading the list dynamically and as such the option list can change. Is there any way of working around this?

If its by design then can I suggest you rename the options property to initialOptions or defaultOptions (which I believe react ask you to do if it sets the value once and does not update after that)?

[tbleckert]

You should of course be able to change/update the options list, if it's not working then it's a bug. I will take a look at it tonight. Thanks for reporting it.

[xedef]

Any news on this one?

[xedef]

I've created pull request #14 for this. Can you check it out, please?

[tbleckert]

Thanks man @xedef ! And sorry for the delay @TomCaserta , it's been crazy at work lately. I will merge in the PR and publish it to NPM right away.

[tbleckert]

Fixed with #14 and published

[SkyHustle]

Maybe I'm missing something :( I'm passing an array to options from a parent component like so:

<SelectSearch className="select-search-box" onChange={this.handleChange.bind(this)} options={this.props.displayTricks} ref="trickName" value="" name="tricks" placeholder="Search or Choose your trick" />

But when I update displayTricks in the parent and re-render the child component displayTricks isn't being updated, unless I refresh the page of course.

Essentially I would like to know how to dynamically add to options

[tbleckert]

Since you are using props, you need to make sure that your own component updates the props when it should. Props is not updated automatically, you need to implement "componentWillReceiveProps". And also, I would write "displayTricks" to the state since it can be updated.

constructor(props) {
    super(props);

    this.state = {
        displayTricks: this.props.displayTricks
    };
}

componentWillReceiveProps(nextProps) {
    // check if nextProps.displayTricks is different than this.state.displayTricks
    this.setState({displayTricks: nextProps.displayTricks});
}

render() {
    return <SelectSearch className="select-search-box" onChange={this.handleChange.bind(this)} options={this.state.displayTricks} ref="trickName" value="" name="tricks" placeholder="Search or Choose your trick" />;
}