React input defaultValue doesn't update with state

I’m trying to create a simple form with react, but facing difficulty having the data properly bind to the defaultValue of the form.

The behavior I’m looking for is this:

  1. When I open my page, the Text input field should be filled in with the text of my AwayMessage in my database. That is “Sample Text”
  2. Ideally I want to have a placeholder in the Text input field if the AwayMessage in my database has no text.

However, right now, I’m finding that the Text input field is blank every time I refresh the page. (Though what I type into the input does save properly and persist.) I think this is because the input text field’s html loads when the AwayMessage is an empty object, but doesn’t refresh when the awayMessage loads. Also, I’m unable to specify a default value for the field.

I removed some of the code for clarity (i.e. onToggleChange)

    window.Pages ||= {}

    Pages.AwayMessages = React.createClass

      getInitialState: ->
        App.API.fetchAwayMessage (data) =>
        @setState awayMessage:data.away_message
        {awayMessage: {}}

      onTextChange: (event) ->
        console.log "VALUE",

      onSubmit: (e) ->
        window.a = @
        awayMessage = {}
        console.log "value of text", @refs["text"].getDOMNode().value

      awayMessage: (awayMessage)->
        console.log "I'm saving", awayMessage
        App.API.saveAwayMessage awayMessage, (data) =>
          if data.status == 'ok'
            notificationActions.notify("Away Message saved.")
            @setState awayMessage:awayMessage

      render: ->
        console.log "AWAY_MESSAGE", this.state.awayMessage
        awayMessageText = if this.state.awayMessage then this.state.awayMessage.text else "Placeholder Text"
        `<div className="away-messages">
           <div className="header">
             <h4>Away Messages</h4>
           <div className="content">
             <div className="input-group">
               <label for="master_toggle">On?</label>
               <input ref="master_toggle" type="checkbox" onChange={this.onToggleChange} defaultChecked={this.state.awayMessage.master_toggle} />
             <div className="input-group">
               <label for="text">Text</label>
               <input ref="text" onChange={this.onTextChange} defaultValue={awayMessageText} />
           <div className="footer">
             <button className="button2" onClick={this.close}>Close</button>
             <button className="button1" onClick={this.onSubmit}>Save</button>

my console.log for AwayMessage shows the following:

AWAY_MESSAGE Object {id: 1, company_id: 1, text: "Sample Text", master_toggle: false}

45 thoughts on “React input defaultValue doesn't update with state”

  1. Greetings from Idaho! I’m bored to death at work so I decided to check out
    your blog on my iphone during lunch break. I really like the knowledge
    you provide here and can’t wait to take a look when I get home.
    I’m surprised at how fast your blog loaded on my mobile ..

    I’m not even using WIFI, just 3G .. Anyhow, awesome site!

  2. I need to to thank you for this excellent read!! I certainly loved every bit of it.
    I have got you book marked to check out new stuff you post…

  3. Greetings from Idaho! I’m bored to tears at work so I decided to check out your blog
    on my iphone during lunch break. I love the information you present
    here and can’t wait to take a look when I get home. I’m amazed at how quick your blog loaded on my
    cell phone .. I’m not even using WIFI, just 3G ..

    Anyhow, good site!

  4. This design is steller! You certainly know how to keep
    a reader amused. Between your wit and your videos, I
    was almost moved to start my own blog (well, almost…HaHa!)
    Fantastic job. I really loved what you had to say,
    and more than that, how you presented it. Too cool!

  5. Wow, incredible weblog structure! How lengthy have you ever been running a blog for? you make blogging glance easy. The full glance of your site is magnificent, as well as the content material!


Leave a Comment