diff --git a/gatsby-node.js b/gatsby-node.js
index 4e6755b0..5688a83e 100755
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -112,13 +112,11 @@ exports.createPages = ({ graphql, actions }) => {
                   fields {
                     slug
                     section
-                    
                   }
                   frontmatter {
-									title
-                  description
+                    title
+                    description
                   }
-                  
                 }
               }
             }
diff --git a/src/components/SearchComponent.jsx b/src/components/SearchComponent.jsx
index 21f8c02c..95ea0ac9 100644
--- a/src/components/SearchComponent.jsx
+++ b/src/components/SearchComponent.jsx
@@ -1,123 +1,138 @@
-import React, {useState, useEffect} from "react"
-import * as JsSearch from "js-search"
-import {Link} from "gatsby"
+import React, { useState, useEffect } from 'react'
+import * as JsSearch from 'js-search'
+import { Link } from 'gatsby'
+import PropTypes from 'prop-types'
 
-const SearchComponent = ({pageContext}) => {
+const SearchComponent = ({ pageContext }) => {
+  const { searchData } = pageContext
+  const searchableData = searchData.map(({ node }) => {
+    return {
+      title: node.frontmatter.title,
+      description: node.frontmatter.description,
+      slug: node.fields.slug,
+      id: node.id
+    }
+  })
+  return (
+    <>
+      Search feature
+      <ClientSearch searchableData={searchableData} />
+    </>
+  )
+}
 
-    const {searchData} = pageContext
-    console.log("searchData", searchData)
-    const state = useState({isLoading: false, isError: false, searchQuery: ''})
-    const searchableData = searchData.map(({node}) => {
-        return {title: node.frontmatter.title, description: node.frontmatter.description, slug: node.fields.slug}
+SearchComponent.propTypes = {
+  pageContext: PropTypes.object.isRequired
+}
+
+const ClientSearch = ({ searchableData }) => {
+  const [searchState, setSearchState] = useState({
+    isLoading: true,
+    searchResults: [],
+    search: null,
+    isError: false,
+    termFrequency: true,
+    removeStopWords: false,
+    searchQuery: '',
+    selectedStrategy: '',
+    selectedSanitizer: ''
+  })
+
+  useEffect(() => {
+    rebuildIndex(searchableData)
+  }, [])
+
+  const rebuildIndex = (searchableData) => {
+    // const {
+    //   removeStopWords,
+    //   selectedStrategy,
+    //   selectedSanitizer,
+    //   termFrequency
+    // } = searchState
+    const dataToSearch = new JsSearch.Search('title')
+    dataToSearch.addIndex('title')
+
+    dataToSearch.addDocuments(searchableData)
+    setSearchState({
+      ...searchState,
+      isLoading: false,
+      search: dataToSearch
     })
-    return (
-        <>Search feature
-            <ClientSearch searchableData={searchableData}/>
-        </>
-    )
-}
+  }
 
-const ClientSearch = ({searchableData}) => {
-    const [searchState, setSearchState] = useState({
-        isLoading: true,
-        searchResults: [],
-        search: null,
-        isError: false,
-        termFrequency: true,
-        removeStopWords: false,
-        searchQuery: "",
-        selectedStrategy: "",
-        selectedSanitizer: ""
+  const searchData = (e) => {
+    const { search } = searchState
+    const queryResult = search.search(e.target.value)
+    setSearchState({
+      ...searchState,
+      searchQuery: e.target.value,
+      searchResults: queryResult
     })
+  }
+  const handleSubmit = (e) => {
+    e.preventDefault()
+  }
 
-    useEffect(() => {
-        rebuildIndex(searchableData)
-    }, []);
+  return (
+    <div>
+      <div style={{ margin: '0 auto' }}>
+        <form onSubmit={handleSubmit}>
+          <input
+            id="Search"
+            value={searchState.searchQuery}
+            onChange={searchData}
+            placeholder="Enter your search here"
+            style={{
+              margin: '0 auto',
+              width: '400px'
+            }}
+          />
+        </form>
+      </div>
 
-    const rebuildIndex = (searchableData) => {
-        const {removeStopWords, selectedStrategy, selectedSanitizer, termFrequency} = searchState
-        const dataToSearch = new JsSearch.Search("title")
-        dataToSearch.addIndex('title')
+      <br />
 
-        dataToSearch.addDocuments(searchableData)
-        setSearchState({
-            ...searchState,
-            isLoading: false,
-            search: dataToSearch
-        })
-    }
-
-    const searchData = e => {
-        const {search} = searchState
-        const queryResult = search.search(e.target.value)
-        setSearchState({
-            ...searchState,
-            searchQuery: e.target.value,
-            searchResults: queryResult
-        })
-    }
-    const handleSubmit = (e) => {
-        e.preventDefault()
-    }
-
-    return (
-        <div>
-            <div style={
-                {margin: "0 auto"}
-            }>
-                <form onSubmit={handleSubmit}>
-                    <input id="Search"
-                        value={
-                            searchState.searchQuery
-                        }
-                        onChange={searchData}
-                        placeholder="Enter your search here"
-                        style={
-                            {
-                                margin: "0 auto",
-                                width: "400px"
-                            }
-                        }/>
-                </form>
-            </div>
-
-            <br/>
-
-            <div><ResultList searchResults={
-                    searchState.searchResults
-                }/></div>
-
-        </div>
-    )
+      <div>
+        <ResultList searchResults={searchState.searchResults} />
+      </div>
+    </div>
+  )
 }
 
-
-const ResultList = ({searchResults}) => {
-        return (<div>
-            <div>
-                Total results found: {
-                searchResults.length
-            } </div>
-            <ul> {
-                searchResults.map((element) =>< li > <ResultElement title={
-                        element.title
-                    }
-                    slug={
-                        element.slug
-                    }/></li>
-                )
-            } </ul>
-        </div>
-    )
+ClientSearch.propTypes = {
+  searchableData: PropTypes.array.isRequired
 }
 
-const ResultElement = ({title, slug}) => {
-    return (
-        <>
-            <Link to={slug}>
-                {title} </Link>
-        </>
-    )
+const ResultList = ({ searchResults }) => {
+  return (
+    <div>
+      <div>Total results found: {searchResults.length} </div>
+      <ul>
+        {searchResults.map((element) => (
+          <li key={element.id}>
+            <ResultElement title={element.title} slug={element.slug} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+ResultList.propTypes = {
+  searchResults: PropTypes.array.isRequired
+}
+
+const ResultElement = ({ title, slug }) => {
+  return (
+    <>
+      <Link to={slug}>{title} </Link>
+    </>
+  )
+}
+
+ResultElement.propTypes = {
+  title: PropTypes.string.isRequired,
+  slug: PropTypes.string.isRequired
 }
 
 export default SearchComponent