I am facing an issue with my container setup where the child container is handling states and receiving props from the parent. The problem arises when I have two select statements in which onChange sets the state in the child container, causing it to re-render unexpectedly. Strangely, despite checking only once, the render() and setState() codes are triggered repeatedly (verified using debugger). Below is the code snippet for my Select combobox:
<Select
native
name="evidenceNode"
value={nodeType}
onChange={this.handleChange('nodeType')}
className={classes.textField}
>
<option />
{NODE_TYPE.map(function (item, i) {
return <option key={i} value={item}>{item}</option>
})}
</Select>
<Select
native
name="modelType"
value={modelType}
onChange={this.handleChange('modelType')}
className={classes.textField}
>
<option />
{MODEL_TYPE.map(function (item, i) {
return <option key={i} value={item}>{item}</option>
})}
</Select>
The handleChange function responsible for setting the state:
handleChange = name => event => {
this.setState({
[name]: event.target.value,
});
};
I believe there's a simple fix for this issue, but I can't seem to figure out where I am going wrong.
Here are some of the troubleshooting steps I've taken:
- Changed the way I call handle change to an arrow function, but it didn't resolve the issue.
- Removed one of the Select statements and tested again, which worked successfully.
- Tried removing the handleChange call from one of the Select statements, and everything ran smoothly.
Additionally, I'd like to mention that I have a componentWillReceiveProps function (not sure if it affects the situation):
componentWillReceiveProps(nextProps, nextContext) {
if(nextProps.selectedNode !== this.state.selectedNode){
this.setState({
selectedNode: nextProps.selectedNode
});
}
}