React-Select: How do I update the selected option dropdown's defaultValue on selected value onChange?

Question

The following class is supposed to handle value change for two drop downs (using a react-select) component.

How do I update the default displayed value on the dropdown when I select a different dropdown option? As it stands currently the select dropdown option does not change?

I've tried this.defaultValue = option.value and do not observe any change in the dropdown selected value.

handleOwnerChange = (option) => {
    this.setState({selectedOwnerId: option.value});
    this.defaultValue = option.value;
    return option;
}
handleApproverChange = (option) => {
    this.setState({selectedApproverId: option.value});
    this.defaultValue = option.value;
    return option;
}

Please advise.

import React from 'react';
import Select from 'react-select';
import { riskValue, formatName } from '../../common/Functions';
import './EditRisk.css';

export class EditRiskSummary extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedOwnerId: this.props.data.risk.ownerid,
            selectedApproverId: this.props.data.risk.approverid
        }
    }
    handleOwnerChange = (option) => {
        this.setState({selectedOwnerId: option.value});
        this.defaultValue = option.value;
        return option;
    }
    handleApproverChange = (option) => {
        this.setState({selectedApproverId: option.value});
        this.defaultValue = option.value;
        return option;
    }
    componentDidUpdate(e) {
        let ownerChanged = this.state.selectedOwnerId !== e.data.risk.ownerid;
        let approverChanged = this.state.selectedApproverId !== e.data.risk.approverid;
        this.state = {
            selectedOwnerId: e.data.risk.ownerid,
            selectedApproverId: e.data.risk.approverid
        }
        return ownerChanged || approverChanged;
    }
    
    render() {
        return (
            <div className="tbl layout" id="summary">
                <div className="tr">
                    <div className="td label">Risk #</div>
                    <div className="td">{this.props.data.risk.riskid} [<a href="" onClick="ctrl.getRiskReport()">Risk Summary</a>]</div>
                    <div className="td label">
                        Current Risk
                    </div>
                    <div className="td {this.props.risk.currentlevel}">
                        {riskValue(this.props.data.risk.currentlevel, this.props.data.risk.currentlikelihood, this.props.data.risk.currentconsequence)}
                    </div>
                </div>   
                <div className="tr">
                    <div className="td label">        
                        Creator
                    </div>
                    <div className="td">
                        Admin
                    </div>
                    <div className="td label">
                        Risk State
                    </div>
                    <div className="td">
                        {this.props.data.risk.riskstate}
                    </div>
                </div>      
                <div className="tr">
                    <div className="td label">
                        Owner
                    </div>
                    <div className="td">
                        <Select value={this.props.data.users.filter(option => option.value === this.props.data.risk.ownerid)} 
                                options={this.props.data.users} 
                                onChange={this.handleOwnerChange.bind(this)} />
                    </div>
                    <div className="td label">
                        Risk Approver
                    </div>
                    <div className="td">
                        <Select value={this.props.data.users.filter(option => option.value === this.props.data.risk.approverid)} 
                                options={this.props.data.users} 
                                onChange={this.handleApproverChange.bind(this)} />
                    </div>
                </div>
            </div>
        );
    }
}

Answer 1

Looks like I had to directly modify my prop's inner property, namely risk.ownerid, and risk.approverid, to the option value so that my select option's filter would choose the appropriate value since the select option was dependent on the object's data.users list of users.

Reliance on the props of the risk which is controlling the filter predicate for the users list effectively solved my issue. Now navigation to other risks fetches the appropriate users and changing the user manually updates the select option until navigation away and back occurs, thereby re fetching the original user for the dropdown.

value={this.props.data.users.filter(option => option.value === this.props.data.risk.ownerid)}

value={this.props.data.users.filter(option => option.value === this.props.data.risk.approverid)}

handleOwnerChange = (option) => {
    this.setState({selectedOwnerId: option.value});
    this.props.data.risk.ownerid = option.value;
}
handleApproverChange = (option) => {
    this.setState({selectedApproverId: option.value});
    this.props.data.risk.approverid = option.value;
}