Strange behaviour with select and default value

[pioz]

Steps to reproduce

I've created a new rails app 5.1 and add react-rails 2.4.3:

rails new ciccio
cd ciccio
echo "gem 'react-rails'" >> Gemfile
bundle
rails g react:install
rails g scaffold post title body:text
rails db:migrate

I've create a simple React component Hello.jsx

class Hello extends React.Component { 
  render() {
    return(
      <div>
        <select defaultValue={1}>
          <option value={1}>Select this to set value to {1}</option>
          <option value={2}>Select this to set value to {2}</option>
        </select>
      </div>
    )
  }
}

And I render this component on app/views/posts/index.html.erb

<%= react_component('Hello', {}, {prerender: true}) %>

Expected behavior

When I visit the page http://localhost:3000/posts I should see the select and nothing on console.log

Actual behavior

In console.log I get Warning: Text content did not match. Server: "Select this to set value to 1" Client: "Select this to set value to "

System configuration

Sprockets version: 3.7.1
React-Rails version: 2.4.3
Rails version: 5.1
Ruby version: 2.4.2

[BookOfGreg]

Is this issue, the way React handles forms? https://reactjs.org/docs/forms.html#the-select-tag

[p-salido]

@pioz If you don't have React Dev Tools installed, first step in troubleshooting this is to install them and inspect actual props passed to the select tag.

[mabid]

I investigated this issue, it is not a react-rails issue but an issue in react's hydrate. The issue has been fixed here facebook/react#11602

[BookOfGreg]

Thanks @mabid , once I'm notified there's a new release of react, I'll update the pre-bundle for sprockets users.

[alkesh26]

No updates on this for a long time. Closing this one.