component

resource/js/app.js

@@ -19,9 +19,13 @@ class Crowi extends React.Component {
 }
 */
 
-var searchElement = document.getElementById('search-top');
-if (searchElement) {
-  $(function() {
-    ReactDOM.render(<HeaderSearchBox />, searchElement);
-  });
-}
+var componentMappings = {
+  'search-top': <HeaderSearchBox />,
+};
+
+Object.keys(componentMappings).forEach((key) => {
+  var elem = document.getElementById(key);
+  if (elem) {
+    ReactDOM.render(componentMappings[key], elem);
+  }
+});

resource/js/components/Header/SearchBox.js

@@ -1,9 +1,15 @@
+// This is the root component for #search-top
+
 import React from 'react';
 
 import SearchSuggest from './SearchSuggest';
 
 export default class extends React.Component {
 
+  getInitialState() {
+    return {data: []};
+  }
+
   render() {
     return (
       <div className="form-group input-group search-top-input-group">