             value={@state.videoIDs} onChange={@handleVideoidsChange}
             placeholder="Comma-separated video IDs"/>
         </div>
+        <input type="text" name="dummy" style={{"display": "none"}}/>
         <button
           className="btn btn-default" type="button"
-          onClick={@onClickRegister}>Register</button>
+          onClick={@handleRegisterButton}>Register</button>
       </form>
     </div>
 
 
 RegisteredVideoIDs = React.createClass
 
-  getInitialState: ->
-    ids: []
-
-  componentDidMount: ->
-    request
-      .get URL_REGISTERED_IDS
-      .end (err, res) =>
-        console.log res
-        @setState
-          ids: res.body
+  propTypes:
+    ids: React.PropTypes.array
 
   render: ->
-    ids = @state.ids
     <div className="container">
       <h2>Registered Video IDs</h2>
       <ul>
-        {ids.map (v) ->
+        {@props.ids.map (v) ->
           <li key={v.key}>{v.value}</li>
         }
       </ul>
     </div>
 
 
-ReactDOM.render(
-  <div>
-    <RegisterVideoID/>
-    <RegisteredVideoIDs/>
-  </div>,
-  document.getElementById "react"
-)
+ReactDOM.render <VideoIDManager />, document.getElementById("react")

URL_REGISTER_IDS = "/lib/register-ids"
URL_REGISTERED_IDS = "/lib/registered-ids"

RegisterVideoID = React.createClass

  getInitialState: ->
    videoIDs: ""

    @setState
      videoIDs: e.target.value

  handleRegisterButton: ->
    if @state.videoIDs isnt ""
      if @props.onRegister?
        @props.onRegister @state.videoIDs.split(",").map (v) ->
          v.replace(/^\s+|\s+$/g, "")
      @setState
        videoIDs: ""

  render: ->
    <div className="container">
