Getting
"Uncaught (in promise) SyntaxError: Unexpected end of JSON input at search (Managebooks.jsx:26:1)" this error if I press backspace to show all data.
For searching through API I am using async await.
async function search(key)
{
console.log("key",key)
let result= await fetch("http://localhost:8000/api/books/search/"+key)
let final=await result.json();
setQuery(final);
}
Below will show the result of the search or all datas
{query?
query && query.map(book=>(
<tbody key={book.id}>
<tr>
<th scope="row" >
<img src={`http://localhost:8000/${book.file_path}`} alt="image not found" width={80} height={80}/>
</th>
<th>{book.title}</th>
<td>{book.author}</td>
<td>{book.genre}</td>
<td>{book.published_date}</td>
<td> <button className="btn btn-info" onClick={(e)=>editHandler(book.id)} >Edit</button> </td>
<td> <button className="btn btn-danger" onClick={(e)=>deleteHandler(e,book.id)}>Delete</button> </td>
</tr>
</tbody>
)) :
data && data.map(book=>(
<tbody key={book.id}>
<tr>
<th scope="row" >
<img src={`http://localhost:8000/${book.file_path}`} alt="image not found" width={80} height={80}/>
</th>
<th>{book.title}</th>
<td>{book.author}</td>
<td>{book.genre}</td>
<td>{book.published_date}</td>
<td> <button className="btn btn-info" onClick={(e)=>editHandler(book.id)} >Edit</button> </td>
<td> <button className="btn btn-danger" onClick={(e)=>deleteHandler(e,book.id)}>Delete</button> </td>
</tr>
</tbody>
))
}