reactjs - React rerender only one child -

in form have few dropdown components. whenever first dropdown option changes want update props second dropdown , rerender it. code looks this

handleprojectchange(option) {     //this.setstate({ selectedproject: option })     this.refs.phase.props = option.phases;     //this.refs.forceupdate()     this.refs.phase.render() }  render() {     var projectoptions = this.projectoptions     var defaultprojectoption = this.state.selectedproject     var phaseoptions = defaultprojectoption.phaseoptions     var defaultphaseoption = phaseoptions[0]     var worktypeoptions = api.worktypes().map(x => { return  { value: x, label: x } })     var defaultworktypeoption = worktypeoptions[0]     return (         <div>             <dropdown ref='project' options={projectoptions} value={defaultprojectoption} onchange={this.handleprojectchange.bind(this)} />             <dropdown ref='phase' options={phaseoptions} value={defaultphaseoption} />             <dropdown options={worktypeoptions} value={defaultworktypeoption} />                             <button classname="btn btn-primary"  onclick={this.handleaddclick.bind(this)}>add</button>         </div>     ) } 

but props not changed, rerenders same options. @ moment im rerendering entire form setting new state on it. there way rerender 1 child/dropdown new props?

the way put selected option in first dropdown selectedproject in state.

and inside render function, fetch/ populate options in second dropdown, dependent on selected project.

flow be:

• user selects option in first dropdown.
• this triggers handleprojectchange()
• inside handleprojectchange(), newly selected option put in state, this.setstate() call
• because state changed, react re-runs entire render() function.
• under hood, react figures out second dropdown has changed, react re-render second drop-down on screen/ in dom.