React Js - Unable To Update Text After Img Onclick Event

I am trying to update the input text field ( Start time ) after the onClick={this.populateDate}. But I get the default value passed to the AJAX call to PHP. https://jsfiddle.net/a

Solution 1:

I have gone through the date picker library you are using. To make this code work you'll have to add componentDidMount as follows.

componentDidMount(){
    document.getElementById('demo1').onchange= this.setStartTime;
}

Then you need to modify you setStartTime function as follows

setStartTime() {
        this.setState({start_time: document.getElementById('demo1').value});
}

Because the library is triggering change event programatically(as the value is being changed programmatically). Hence you'll not get the event object.

Though doing so will make your code work, my suggestion will be to use any react library for date-time picker(if you don't have the dependency to use this only) which provide proper configuration as per your requirement. Also try to use refs instead of document.getElement.... which is the react way of interacting with dom.