handle search mentorlist by name

src/App.js

@@ -9,13 +9,25 @@ import Status from "./components/Status";
 import Mentor from "./components/Mentor";
 
 class App extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+        search: '',
+    }
+  }
+
+  search = (val) => {
+    this.setState({ search: val });
+  }
+
   render() {
     return (
       <div className="App">
-        <Header />
+        <Header handleSearch={this.search} />
         <Router />
         {/* <Status /> */}
-        <Mentor />
+        <Mentor search={this.state.search} />
       </div>
     );
   }

src/components/Header.js

@@ -7,14 +7,24 @@ class Header extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            username: 'Hi!'
+            username: 'Hi!',
+            search: '',
         }
     }
 
     user = (val) => {
         this.setState({ username: val });
     }
 
+    search = (event) => {
+        this.setState({ search: event.target.value });
+    }
+
+    submit = (event) => {
+        event.preventDefault();
+        this.props.handleSearch(this.state.search);
+    }
+
     render() {
         return (
             <div className="main thememain-header">
@@ -42,8 +52,8 @@ class Header extends Component {
                                     <a className="nav-link disabled" href="#" title="About">About</a>
                                 </li>
                             </ul>
-                            <form className="form-inline my-2 my-lg-0">
-                                <input className="form-control mr-sm-2" type="search" placeholder="Search" />
+                            <form className="form-inline my-2 my-lg-0" onSubmit={this.submit}>
+                                <input className="form-control mr-sm-2" type="search" placeholder="Search" onChange={this.search} />
                                 <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                             </form>
                             <Link to="/login">

src/components/Mentor.js

@@ -36,14 +36,21 @@ class Mentor extends Component {
         });*/
     }
 
+    getSearchedProducts() {
+        const { search } = this.props;
+        return search ? this.state.Product.filter(
+            (data) => data.name.toLowerCase().indexOf(search.toLowerCase()) !== -1
+        ) : this.state.Product;
+    }
+
 
     render() {
         return (
             <div className="main thememain-white">
                 <div className="container content-main">
                     <br />
                     <div className="row">
-                        {this.state.Product.map((data) => {
+                        {this.getSearchedProducts().map((data) => {
                             return <MentorList key={data.id} data={data} />
                         })}
                     </div>