React Modal with axios infinite loop - reactjs

Question

The print statement in my if (this.props.currentNode.getAttribute("label").toLowerCase() === "data")
is being called infinite times which keeps on printing in modal and sending a post request until the modal is closed.
This does not happen when I put the post call in ComponentDidMount
Can anyone please explain why this is happening and what I can do to avoid this?
class ConfigurationModal extends React.Component {
constructor(props) {
super(props);
this.state = {
selectSource: [],
};
}
el = document.createElement("div");
componentDidMount() {
modalRoot.appendChild(this.el);
}
componentWillUnmount() {
modalRoot.removeChild(this.el);
}
jsonIsEmpty = (obj) => {
return obj === "[object Object]" ? true : false;
};
render() {
// The gray background
const backdropStyle = {
position: "fixed",
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: "rgba(0,0,0,0.3)",
padding: 50,
};
if (this.props.currentNode.getAttribute("label").toLowerCase() === "data") {
console.log("in modal")
http.post("configure_get_sources", {
headers: {
"content-type": "application/json",
},
})
.then((res) => {
this.setState({ selectSource: res.data });
});
var tempConfig = this.jsonIsEmpty(
this.props.currentNode.getAttribute("configuration")
)
? {}
: JSON.parse(this.props.currentNode.getAttribute("configuration"));
let renderedSources = this.state.selectSource.map((item, i) => {
return (
<option value={item} key={i} selected={item === tempConfig["Source"]}>
{item}
</option>
);
});
return ReactDOM.createPortal(
<div className="backdrop" style={backdropStyle}>
<Modal.Dialog>
<Modal.Header>
<Modal.Title>Configure Node</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="container">
<div className="row">
<label className="col-md-4">Data Source: </label>
<select className="col-md-7" id="dataSelect">
{renderedSources}
</select>
</div>
<div className="row col-md-3"></div>
</div>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.props.onClose}>
Close
</Button>
<Button variant="primary" onClick={this.props.saveModal}>
Save changes
</Button>
</Modal.Footer>
</Modal.Dialog>
</div>,
this.el
);
}
return "";
}
}
export default ConfigurationModal;

Answer 1

You're modifying component's state inside render, this causing an infinity loop. Because of react re-rendering component after each props or state change. https://reactjs.org/docs/faq-state.html