Pass search query and handler in props

src/components/Blog.js

@@ -9,7 +9,9 @@ import contentStyle from '../stylesheets/content.scss'
 export default class Blog extends Component {
   static propTypes = {
     isLoading: PropTypes.bool.isRequired,
-    posts: PropTypes.arrayOf(PropTypes.object).isRequired
+    posts: PropTypes.arrayOf(PropTypes.object).isRequired,
+    searchString: PropTypes.string.isRequired,
+    handleChange: PropTypes.func.isRequired
   }
 
   render () {
@@ -41,7 +43,7 @@ export default class Blog extends Component {
       <div className={`${contentStyle.content}`} id="blog" role="region" aria-label="Blog posts">
         <div className={styles.headerContainer}>
           <Header header={'Blog'} role="heading" aria-level="2"/>
-          <SearchBox />
+          <SearchBox searchString={this.props.searchString} handleChange={this.props.handleChange} />
         </div>
         <div className={`${styles.postsList}`} role="list">
           {postsHTML}

src/components/NotFoundPage.js

@@ -3,7 +3,7 @@ import { Navbar, Header } from '.'
 import '../stylesheets/globals.scss'
 import contentStyle from '../stylesheets/content.scss'
 
-export const NotFoundPage = (props) => {
+const NotFoundPage = (props) => {
   return (
     <div>
       <Navbar config={props.config}/>

src/components/SearchBox.js

@@ -5,14 +5,17 @@ import styles from './SearchBox.scss'
 
 export default class SearchBox extends Component {
   static propTypes = {
-    query: PropTypes.string
+    handleChange: PropTypes.func.isRequired,
+    searchString: PropTypes.string
   }
 
   render () {
     return (
       <div className={styles.container}>
-        <input placeholder='Search' className={styles.search} type="text" />
+        <input placeholder='Search' className={styles.search} type="text" value={this.props.searchString} onChange={this.props.handleChange}/>
-        <i className="fa fa-search"></i>
+        <span>
+          <i className={`fa fa-search ${styles.icon}`}></i>
+        </span>
       </div>
     )
   }

src/components/SearchBox.scss

@@ -6,7 +6,6 @@
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  border: 2px $black;
 }
 
 .search {
@@ -15,11 +14,10 @@
   width: 20px;
   color: $black;
   font-size: 16px;
-  font-weight: 100;
   letter-spacing: 2px;
   border: none;
   border-radius: 5px;
-  background: $body;
+  background: $white;
   transition: width 0.4s ease;
   outline: none;
   box-sizing: border-box;
@@ -27,7 +25,7 @@
   &:focus{ width: 300px; }
 }
 
-i{
+.icon{
   position: relative;
   left: -37px;
   color: $black;

src/containers/BlogContainer.js

@@ -12,13 +12,18 @@ export default class BlogContainer extends Component {
     super(props)
     this.state = {
       isLoading: false,
-      posts: props.posts
+      posts: props.posts,
+      searchString: ''
     }
   }
 
+  handleChange (event) {
+    this.setState({ searchString: event.target.value })
+  }
+
   render () {
     return (
-      <Blog isLoading={ this.state.isLoading } posts={ this.state.posts } />
+      <Blog isLoading={ this.state.isLoading } posts={ this.state.posts } searchString={this.state.searchString} handleChange={this.handleChange.bind(this)} />
     )
   }
 }

src/containers/NotFoundContainer.js

@@ -11,13 +11,11 @@ export default class NotFoundContainer extends Component {
   constructor (props) {
     super(props)
     let data
-
+    if (typeof window === 'undefined') {
-    // eslint-disable-next-line no-undef
+      data = props.staticContext.context
-    if (__isBrowser__) {
+    } else {
       data = window.__INITIAL_DATA__
       delete window.__INITIAL_DATA__
-    } else {
-      data = props.staticContext.context
     }
 
     this.state = {