I want to pass state value into compontDidmount - reactjs

Question

I am trying to pass date from a input flild to a state and pass it into API. I am not able to do this in componentDidMount() but I am able to pass it in componentDidUpdate()
The problem is the that it becomes a endless loop.
export default class Med extends React.Component {
constructor(props) {
super(props);
this.state = {
dateState: [],
};
this.dateHandler = this.dateHandler.bind(this);
}
dateHandler = (e) => {
var dateselected = e.target.value;
var date = moment(e.target.value).format("YYYY-MM-DD");
console.log(date);
this.setState({ dateState: date });
};
componentDidMount() {
console.log("====================================");
console.log(this.state.dateState); //not able to console.log
console.log("====================================");
const config = {
headers: {
Authorization: `token ` + localStorage.getItem("token"),
},
};
axios.get("customer/medGET/?date=" + this.state.dateState, config).then((res) => {
this.setState({ items: res.data });
});
}
render() {
return (
<table>
<tr>
<input type="date" onChange={this.dateHandler} />
</tr>
</table>
);
}
}

Answer 1

This simplified version of your code shows that the state is available just fine in componentDidMount.
class Med extends React.Component {
constructor(props) {
super(props);
this.state = {
dateState: ["1"],
};
}
componentDidMount() {
console.log("====================================");
console.log(this.state.dateState);
console.log("====================================");
}
render() {
return (
<table>
<tr>
<input type="date" />
</tr>
</table>
);
}
}
ReactDOM.render(<Med />, document.getElementById("x"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="x"></div>