ReactJS form field with value not updating, and logging as a Date field

Question

Using Reactstrap for easy styling, and I'm using their <Input> component, and I have the form built, but it's not allowing text input. The console is throwing this error when typing into the field:

I have the component setup and the rest of the form is working properly:

constructor(props) {
    super(props);
    this.state = {
      firstName: "",
      preferredName: "",
      middleName: "",
      lastName: "",
      address1: "",
      address2: "",
      city: "",
      state: "",
      zip: "",
      maxContacts: 5,
      currentContacts: 0,
      releaseDate: Date.now(),
      gender: "M",
      institutionId: "",
      country: "US",
      areaCode: 1,
      language: "EN",
      contacts: []
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  render() {
    let prependStyle = {
      fontSize: "2pt",
      fontFamily: "monospace"
    };

inside the render, I set some basic style for later use in the component. Here is the portion of the JSX that is acting funny in the component:

  <InputGroup>
    <InputGroupAddon addonType="prepend" style={prependStyle}>
      Institution ID
    </InputGroupAddon>
    <Input
      type="text"
      value={this.state.institutionId}
      name="instituitonId"
      onChange={this.onChange}
    />
  </InputGroup>

Why is this behaving this way? (no problem editing to get more info.) This is the only field in the form that doesn't update the input on the rendered page, and while there is a date field, it's properly enclosed away from this element.

score 1 · Accepted Answer · answered Nov 01 '18 at 14:18

1

Consider using moment.js to convert your time into a valid time format as your component requires

https://momentjs.com/

so your releaseDate would be something like

formattedReleaseDate = moment(this.state.releaseDate, 'YYYY-MM-DD');

you would want to put this in your render function.

https://momentjs.com/docs/#/query/is-dst-shifted/

answered Nov 01 '18 at 14:18

Demon

826
7
22

while this is good advice, I have to mention that the field in question is and should be simply just text. The field in question is throwing the time format warning. – Chris Rutherford Nov 01 '18 at 14:25
So the whole time is formatted in milliseconds. Date.now() is defined in the javascript docs as Return Values: It returns the number of milliseconds elapsed since January 1, 1970, 00:00:00 UTC – Demon Nov 01 '18 at 14:27
I'm not sure if you need all the state values to be passed to your component. – Demon Nov 01 '18 at 14:29
Oh wait! Yes. I see now. Well... you could pass in something like an event handler like onTextInput and dispatch an event that you have done something to it. This might be a good example. https://stackoverflow.com/questions/42550341/react-trigger-onchange-if-input-value-is-changing-by-state – Demon Nov 01 '18 at 14:38
Okay, so moment fixed the issue with the formatting. Just need to figure out why the `` from my example isn't updating with setState properly. – Chris Rutherford Nov 01 '18 at 14:39
1

Oh, I had a name field not mapping to the state properly. That was the other issue, a field mentioned in the question that wasn't updating on the `onChange` event – Chris Rutherford Nov 01 '18 at 15:02

ReactJS form field with value not updating, and logging as a Date field

1 Answers1