React-Time-Range Only Shows Default Start Time

Question

I've created a form using the React-Time-Range component for taking down banquet room reservations. For some reason, the start time being recorded always defaults to the moment() value I have listed in state.

Can you take a look at my code below to help determine why it does not change, even when a user selects a different value?

The component:

import moment from 'moment';
import TimeRange from 'react-time-range';

class Navbar extends Component {
 constructor(props){
 super(props)
 this.state = {
  startTime: moment(),
  endTime: moment()
}
}

returnFunctionStart = event => {
    this.setState({ startTime: event.startTime })
    };

  returnFunctionEnd = event => {
    this.setState({ endTime: event.endTime })
    };

render () {
return (
    <TimeRange
        onStartTimeChange={this.returnFunctionStart.bind(this)}
        onEndTimeChange={this.returnFunctionEnd}
        startMoment={this.state.startTime}
        endMoment={this.state.endTime}
    />
);
}

It is working fine for end time. Thanks.

so when changing the start time it is not reflecting is that the issue ? — Learner, Jan 03 '20 at 13:48
Just tested out, it works as expected. Where do you face issues? Thanks! — norbitrial, Jan 03 '20 at 13:50
DILEEP -- exactly right...it reflects in the UI, but when I try to retrieve the value for a sendgrid email, the default value appears. very strange. — Eric K., Jan 03 '20 at 15:45

Learner · Accepted Answer · 2020-01-03T14:01:44.617

The above code works fine, if you are using latest version of react you can clean up some code as shown below

You can avoid

Binding read more here
Constructor, since babel takes care of it read more here

import React, {
  Component
} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import moment from "moment";
import TimeRange from "react-time-range";

class Navbar extends Component {
  state = {
    startTime: moment(),
    endTime: moment()
  };

  returnFunctionStart = event => {
    this.setState({
      startTime: event.startTime
    });
  };

  returnFunctionEnd = event => {
    this.setState({
      endTime: event.endTime
    });
  };

  render() {
    return ( <
      TimeRange onStartTimeChange = {
        this.returnFunctionStart
      }
      onEndTimeChange = {
        this.returnFunctionEnd
      }
      startMoment = {
        this.state.startTime
      }
      endMoment = {
        this.state.endTime
      }
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render( < Navbar / > , rootElement);

Working codesandbox

React-Time-Range Only Shows Default Start Time

1 Answers1