pass in context state into component

Author: yuyi-sl

src/Components/Filters/Search.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import Styles from './Search.styles.scss';
 import { useNetwork } from '../../state/network/Context';
 
-const Search = () => {
-  const { state, actions } = useNetwork();
-  const search = state.get('search');
+const Search = ({ name, value }) => {
+  const { actions } = useNetwork();
 
   const handleInputChange = ({ target }) => {
     actions.updateSearch({
-      name: search.name,
+      name,
       value: target.value,
     });
   };
@@ -20,9 +20,18 @@ const Search = () => {
       onChange={handleInputChange}
       placeholder="Search by full URL"
       type="text"
-      value={search.value}
+      value={value}
     />
   );
 };
 
+Search.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string,
+};
+
+Search.defaultProps = {
+  value: '',
+};
+
 export default Search;

src/Containers/FilterContainer.jsx

@@ -22,7 +22,7 @@ const FilterContainer = () => {
   return (
     <section className={Styles['filters-container']}>
       <div className={Styles['filter-row']}>
-        <Search />
+        <Search {...state.get('search')} />
       </div>
 
       <div className={Styles['type-filter-row']}>