Strange behaviour with select and default value

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

[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.

[alkesh26]

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