title: set state in a function not working - reactJs
body: <p>UPDATE: I have logged three lines of code, before sending the data to updateEvent function containing the endpoint. The following is the logs:</p>
  
  <blockquote>
    <p>the new event date is  2019-01-01T01:00:00.000</p>
    
    <p>the new SET event date is:  2019-01-01T01:00</p>
    
    <p>the event detail is:  {date: "2019-01-01T01:00" …}</p>
  </blockquote>
  
  <p>The state is once again not set to the new format. Can anyone see what the error could be?</p>
  
  <p>I am trying to render an event date to send as body to an endpoint.The user is able to input the date in the TextInput field, however before I send the event date, I want to modify its format, using moment.js inside updateEvent cb (YYYY-MM-DDTkk:mm:ss.SSS"), therefore I create a new variable </p>
  
  <blockquote>
    <p>newDate</p>
  </blockquote>
  
  <p>However, the setState inside of updateEvent doesn't actually set state and keeps the value of date as it is has been set in handleEventInputChange. I have a suspicion that it could be due to setting state to the same state variable twice, inside the handleEventInputChange and handleEvent. Can anyone confirm and/or propose a solution? </p>
  
  <pre><code> //... import and styles 
  class EditEvent extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              event: {
                  date: '',
              },
          };
  
          this.handleEventInputChange = this.handleEventInputChange.bind(this);
          this.updateEvent = this.updateEvent.bind(this);
      }
  
      handleEventInputChange(event) {
          const target = event.target;
          const value = target.type === 'checkbox' ? target.checked : target.value;
          const name = target.name;
  
          this.setState({
              event: {
                  ...this.state.event,
                  [name]: value
              }
          });
      }
  
      updateEvent() {
          const { event } = this.state;
              let newDate = moment(this.state.event.date).format("YYYY-MM-DDTkk:mm:ss.SSS");
  
              this.setState(() =&gt; ({
                  event: {
                      ...this.state.event,
                      date: newDate,
                  }}))
  
  
              console.log("the new event date is ", newDate)
              console.log("the new SET event date is: ", event.date)
              console.log("the event detail is: ", event)
  
              this.props.updateEvent(this.props.event.id, event);
      }
  
      renderEvent() {
          const {
              event,
          } = this.state;
  
          return (
              &lt;div&gt;
                  &lt;Paper style={styles.paper}&gt;
                      &lt;TextField
                          name="date"
                          type="datetime-local"
                          onChange={this.handleEventInputChange}
                          value={event.date}/&gt;
                  &lt;/Paper&gt;
              &lt;/div&gt;
          );
      }
  
      render() {
          return (
              &lt;ViewContainer
                  title="Update Event"
                  toolbarRight={
                      &lt;Button
                          onClick={this.updateEvent}
                      &gt; Save
                      &lt;/Button&gt;
                  }
              &gt;
                  {this.renderEvent()}
              &lt;/ViewContainer&gt;
          );
      }
  }
  
  //... mapStateToProps, mapDispatchToProps and export default connect for EditEvent
  </code></pre>