Rendering <option value = "foo" selected> on the server

Question

React v0.12 / v0.13: Im having a problem with the <select> element, which Id would like to display both on the server and on the client (isomorphic). Here is an example that is currently recreating the problem:

 const React = require("react"); const SelectedDebug = React.createClass({ displayName: "SelectedDebug", render() { return ( <div> <select value="C"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> </div> ); } }); module.exports = SelectedDebug; 

The selected attribute is not displayed on the server, but works fine in the browser.

I also tried setting the defaultValue in the <select> element, which does not seem to matter. It works when I use <option value="C" selected> , however, which issues a warning in the console telling me to use either value or defaultValue prop.

The documentation also describes the desired behavior: https://facebook.imtqy.com/react/docs/forms.html#why-select-value

This code works in Node v0.12, using babel-core for forwarding.

Is this a mistake, or am I missing something?

Update: This is a bug in React. See my comment / link below.

Answer 1

This is a known bug that was fixed in master , so it will presumably be fixed with the release of React 0.14.