Upload New File

client/src/Components/Forms/searchbook.jsx

+import React, { Component } from 'react'
+import './forms.css'
+import axios from 'axios';
+
+export default class Search extends Component{
+    constructor(props){
+        super(props)
+        this.state={
+            searchby:'book_name',
+            inp: '',
+            objects:[],
+            test:0
+        }
+        this.handleChange=this.handleChange.bind(this);
+        this.handleinp = this.handleinp.bind(this);
+        this.rendertable=this.rendertable.bind(this);
+        this.search=this.search.bind(this);
+        this.view=this.view.bind(this);
+    }
+    handleChange (event) {
+        this.setState({ searchby: event.target.name});
+      }
+      handleinp(event){
+        this.setState({inp : event.target.value});
+      }
+      view(){
+          this.setState({searchby:'book_name'})
+      }
+      rendertable(){
+            if(this.state.test===0){
+                return <h3  style={{marginLeft:'2%'}}>Results will appear here</h3>
+            }
+            else if(this.state.objects===null){
+                return <h3>No Results!</h3>
+            } 
+            else{
+            return <div style={{marginLeft:'2%'}}>
+            <button onClick={this.view}>View Results</button>
+            <table>
+            <thead>
+                <tr>
+              <th>Book_id</th>
+              <th>Book_name</th>
+              <th>Author</th>
+              <th>price</th>
+              </tr>
+            </thead>
+            <tbody>
+              {this.state.objects.map(id => (
+                <Row id = {id}/>
+              ))}
+            </tbody>
+          </table>
+          </div>
+       }
+      }
+      search(){
+            let object = [];
+            axios.get('http://localhost:5000/book')
+            .then(response=> {response.data.map((obj,idx) => {
+                 if(obj[this.state.searchby].includes(this.state.inp)){
+                    object.push(obj)
+                }          
+            })}) 
+           this.setState({objects:object,test:1});
+            console.log(object); 
+        }
+           
+      
+    render(){
+        return(
+            <div style={{position:"absolute",right:"5%",top:"6%",backgroundColor:"white",width:"600px"}}>
+            <h3 style={{marginLeft:'2%'}}><b>Search Books &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></h3>
+            <h4 style={{marginLeft:'2%'}}>(directly click search to view all details)</h4>
+            <div class="dropdown" style={{marginLeft:"2%"}}>
+            <button class="dropbtn">by name</button>
+            <div class="dropdown-content">
+             <a href="#"  name="book_name" onClick={this.handleChange}>by_name</a>
+             <a href="#" name="author" onClick={this.handleChange}>by_author</a>
+             <a href="#"  name="_id" onClick={this.handleChange}>By_id</a>
+            </div>
+           </div>
+          
+             <input type="text" placeholder="Search" onChange={this.handleinp} style={{marginLeft:"2%"}}/>
+  
+             <button onClick={this.search} className="b1">Search</button>
+             {this.rendertable()}
+           </div>
+        )
+    }
+}
+const Row = ({ id }) => (
+    <tr style={{backgroundColor:"black",color:"white"}}>
+      <td>
+       {id._id}
+      </td>
+      <td>
+       {id.book_name}
+      </td>
+      <td>
+       {id.author}
+      </td>
+      <td>
+       {id.price}
+      </td>
+    </tr>
+  );
\ No newline at end of file