Use new lifecycle method to update component state.

- Use component state to handle rendering of Ansible Select dropdown based on the number of custom virtualenvs the API returns.
This commit is contained in:
kialam
2018-12-22 09:03:44 -05:00
parent e30b198418
commit 5fcdd16f54
2 changed files with 23 additions and 3 deletions

View File

@@ -12,12 +12,25 @@ class AnsibleSelect extends React.Component {
this.onSelectChange = this.onSelectChange.bind(this);
}
state = {
count: 1,
}
static getDerivedStateFromProps(nexProps, _) {
if (nexProps.data) {
return {
count: nexProps.data.length,
}
}
return null;
}
onSelectChange(val, _) {
this.props.selectChange(val);
}
render() {
if (this.props.data.length > 1) {
const { count } = this.state;
if (count > 1) {
return (
<FormGroup label={this.props.labelName} fieldId="ansible-select">
<Select value={this.props.selected} onChange={this.onSelectChange} aria-label="Select Input">