so I do a little project with react and node js and i do a search function that work fine but I just have a little problem i try to figure
I do a function that I search for items with a search word that I send in query and categories to filter in req.body so I send a post request to my back-end and I want to change the url client by the values I post to the server
for example lets say my url is localhost:3001/home and i send to the server the serach word "football" and in categories I send sport
so i want my url look like this localhost:3001/home?search=football&cate=sport
i add here my code from the front
look on the function "searchFun"
React, { useEffect, useState } from "react";
import axios from "axios"
import { useNavigate } from "react-router-dom";
import BookItem from "../bookItem/bookItem";
import './Home.css'
import Logo from "../logo/logo";
import Checkbox from "../CheckBox/CheckBox";
function HomePage() {
const [comedyBooks, setComedy] = useState([])
const [sportBooks, setSport] = useState([])
const [actionBooks, setAction] = useState([])
const [displaySearch, setDisplaySearch] = useState([])
const [search, setSearch] = useState('')
const [boxFilter, setBoxFilter] = useState({
comedy: false,
action: false,
sport: false,
})
let navigate = useNavigate();
useEffect(() => {
let booksArr = []
let comedyBook = []
let sportBook = []
let actionBook = []
axios.get('http://127.0.0.1:3000/books')
.then(async res => {
res.data.data.books.map(el => {
booksArr.push(el)
})
comedyBook = booksArr.filter(el => el.categories == 'comedy')
sportBook = booksArr.filter(el => el.categories == 'sport')
actionBook = booksArr.filter(el => el.categories == 'action')
setAction(actionBook)
setSport(sportBook)
setComedy(comedyBook)
})
}, [])
const searchFun = () => {
try {
axios.create({ withCredentials: true }).post(`http://127.0.0.1:3000/books/search?search=${search}`, {
categories: boxFilter
})
.then(res => {
console.log(res.data.data1)
setDisplaySearch(res.data.data1)
})
} catch (error) {
console.log((error))
}
}
const handleChangeAction = () => {
setBoxFilter({ ...boxFilter, action: !boxFilter.action })
}
const handleChangeSport = () => {
setBoxFilter({ ...boxFilter, sport: !boxFilter.sport })
}
const handleChangeComedy = () => {
setBoxFilter({ ...boxFilter, comedy: !boxFilter.comedy })
}
return (
<div>
<header>
<Logo />
<img className="sub-logo" src='https://www.booknet.co.il/images/site/pages/d_1799_auto_49e74940-d1a2-4fe1-9645-6b526eb69600.jpg' />
</header>
<div>
<input onChange={(e) => setSearch(e.target.value)} placeholder="Search..." />
<button onClick={searchFun}>Search</button>
<Checkbox label='action' value={boxFilter.action} onChange={handleChangeAction} />
<Checkbox label='sport' value={boxFilter.sport} onChange={handleChangeSport} />
<Checkbox label='comedy' value={boxFilter.comedy} onChange={handleChangeComedy} />
</div>
{/* <div className="displaySearch"> */}
{displaySearch.length >= 1 ? displaySearch.map(item => {
return <BookItem key={item._id} item={item} />
}) : null}
{/* </div> */}
<div className="sub-logo-container">
</div>
<div className="home-container">
<p className="title-cat">Comedy Books</p>
<div className="line-bottom"></div>
<div className="books">
{comedyBooks.map(item => {
return <BookItem key={item._id} item={item} />
})}
</div>
<p className="title-cat">Sport Books</p>
<div className="line-bottom"></div>
<div className="books">
{sportBooks.map(item => {
return <BookItem key={item._id} item={item} />
})}
</div>
<p className="title-cat">Action Books</p>
<div className="line-bottom"></div>
<div className="books">
{actionBooks.map(item => {
return <BookItem key={item._id} item={item} />
})}
</div>
</div>
</div>
)
}
export default HomePage<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>my App component
import React, { useState } from "react";
import { Routes, Route } from "react-router-dom";
import './app.css'
import Account from "./Components/account/account";
import AddBook from "./Components/AddBook/AddBook";
import ForgetPassword from "./Components/auth/forgetpassword/forgetpassword";
import Login from "./Components/auth/login/Login";
import ResetPassword from "./Components/auth/resetPassword/resetPassword";
import SignIn from "./Components/auth/sign-in/Sign-in";
import DisplayBook from "./Components/displayBook/displayBook";
import DisplayCart from "./Components/displayCart/displayCart";
import Home from './Components/Home/Home'
import Logo from "./Components/logo/logo";
import MyBooks from "./Components/mybooks/mybooks";
import NavBar from './Components/navBar/navBar'
function App() {
const [cookie, setCookie] = useState()
const name = "elyasaf"
return (
<div className="app-container">
<NavBar set={setCookie} />
{/* <Logo /> */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login set={setCookie} />} />
<Route path="/myAccount" element={<Account />} />
<Route path="/logo" element={<Logo />} />
<Route path="/sign-in" element={<SignIn />} />
<Route path="/forgetpassword" element={<ForgetPassword />} />
<Route path="/users/resetPassword/:token" element={<ResetPassword />} />
<Route path="/addBook" element={<AddBook />} />
<Route path="/MyBooks" element={<MyBooks />} />
<Route path="/MyCart" element={<DisplayCart />} />
<Route path="/book/:bookId" element={<DisplayBook />} />
</Routes>
</div>
);
}
export default App;<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>