added searchbar

Author: Bharanidharan25

package-lock.json

@@ -11,6 +11,7 @@
     "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",
+    "react-select": "^3.1.0",
     "sweetalert2": "^9.10.13"
   },
   "scripts": {

package.json

@@ -24,6 +24,12 @@
     white-space: pre-wrap
   }
 
+  .searchInput{
+    width: 80%;
+    margin: 20px auto;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  }
+  
 
   @media only screen and (min-width: 800px) {
     .cardList{
@@ -42,4 +48,11 @@
       hyphens: auto;
       white-space: pre-wrap
     }
+
+    .searchInput{
+      width: 50%;
+      margin: 20px auto;
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    }
+    
   }

src/App.css

@@ -1,6 +1,6 @@
 import React from 'react';
 import './App.css';
-import {Navbar,Nav,Button,Card, ButtonGroup} from 'react-bootstrap';
+import {Navbar,Nav,Button,Card, ButtonGroup, Form, FormControl} from 'react-bootstrap';
 import CreateModal from './createModal'
 import ShowModal from './ShowModal';
 import Swal from 'sweetalert2'
@@ -9,11 +9,13 @@ class App extends React.Component{
   state = {
     modalShow:false,
     notes:[],
+    notesToDisplay:[],
     modal2Show : false,
     modalType :'',
     id:'',
     title:'',
-    body:''
+    body:'',
+    searchString:''
   }
 
   submitNote = (data) =>{
@@ -68,7 +70,11 @@ class App extends React.Component{
       'Record is Updated',
       'success'
     )
-    }
+  }
+
+  searchItem = () => {
+
+  }
 
 
   render(){
@@ -79,6 +85,10 @@ class App extends React.Component{
         <Nav.Link onClick={() => this.setState({modalShow:true, modalType:''})} style={{color:'white',textDecoration:'none',position:'absolute',right:0,fontSize:'20px'}}><i className="fa fa-plus"></i></Nav.Link>
       </Navbar>
 
+      <Form className='searchInput'>
+        <FormControl type="text" value={this.state.searchString} onChange={(e) => this.setState({searchString:e.target.value})} placeholder="Filter by title..." className="mr-sm-2" />
+      </Form>
+
       <CreateModal
           className='modal-content'
           show={this.state.modalShow}
@@ -98,7 +108,7 @@ class App extends React.Component{
 
       <div style={{width:'90%',margin:'auto'}}>
         <div className='cardList'>
-          {this.state.notes.map( (content)=>(
+          {this.state.notes.filter(note => note.title.includes(this.state.searchString)).map( content => (
             <Card key={content.id} style={{ marginTop:'20px',width: '18rem',boxShadow:'0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)',borderRadius:'0.7rem'}}>
               <Card.Body>
                 <Card.Title style={{display:'flex',justifyContent:'space-between'}}>