I have an input that’s populated with values returned from an API that’s stored into Redux state:
state = {
popoverScenarioName: null,
}
scenarioNameChange = (e) => (
this.setState({popoverScenarioName: e.target.value})
)
// ....
<StyledInput
placeholder="Scenario Name"
onChange={(e) => scenarioNameChange(e)}
onFocus={(e) => e.target.select()}
value={this.state.scenarioName || database.inputs.scenarioName}
/>
When I click into the input and hit backspace to clear the entire field, it always repopulates the value with database.inputs.scenarioName.
I’ve tried setting state to something like
state = {
popoverScenarioName: null || this.props.database.inputs.scenarioName,
}
but that didn’t seem to work neither. My other guess would be to write a dispatch to change database.inputs.scenarioName directly?
Answer
I achieved it with this prop:
scenarioName={this.state.popoverScenarioName === null ? database.inputs.scenarioName : this.state.popoverScenarioName}