I have a component with a dropdown having two options. 'Existing Members' and 'Add New Member'.
If the value of a props.existingMembers.length > 0. No default value should be selected in dropdown. However if the props.existingMembers.length === 0. 'Add New Member' should be selected as the default value in dropdown.
In ComponentDidMount I am making an API call with the help of which props.existingMembers is fetched. Since props.existingMembers always have length 0 in first render(Before API call). I am unable to achieve above requirement.
class AssignOwnershipDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
dropDownValue: '',
};
}
componentDidMount() {
fetchExistingMembersList();
}
static getDerivedStateFromProps(props, state) {
if (props.existingMembers.length === 0) {
return {
dropDownValue: 'Add New'
};
}
if (props.existingMembers.length === 0) {
return {
dropDownValue: ''
};
}
}
handleDropDownSelection = (dropDownValue) => {
this.setState({
dropDownValue
});
}
render() {
const {dropDownValue}=this.state;
return ( <React.Fragment>
<Select value = {dropDownValue}
onChange = {(e) => this.handleDropDownSelection(e.target.value)}>
<MenuItem value = "Add New" key = {0}> Add New </MenuItem>
<MenuItem value = "Existing Member" key = {1}> Existing Member </MenuItem>
</Select>
</React.Fragment>
);
}
}
The above approach seems to be not working as the value of dropdown is not changing
You can add an item with empty value so if the state is empty nothing will be shown in dropdown
there is a minor mistake
static getDerivedStateFromProps(props, state) {
if (props.existingMembers.length === 0) {
return {
dropDownValue: 'Add New'
};
}
// mistake
if (props.existingMembers.length > 0) {
return {
dropDownValue: ''
};
}
}