Autoría | Ultima modificación | Ver Log |
import React, { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { useHistory, useLocation } from 'react-router-dom'
const SearchBar = () => {
const { register, handleSubmit, setValue } = useForm()
const location = useLocation()
const history = useHistory()
useEffect(() => {
const keyword = new URLSearchParams(location.search).get('keyword')
setValue('keyword', keyword)
}, [])
const onSubmitHandler = ({ keyword }) => {
history.push({
pathname: location.pathname,
search: `?keyword=${keyword}`
})
}
return (
<div className="search-sec">
<div className="container">
<div className="search-box">
<form name="form-listing-search" onSubmit={handleSubmit(onSubmitHandler)}>
<input
type="text"
name="keyword"
placeholder="¿Que desea encontrar?"
ref={register}
/>
<button type="submit">Buscar</button>
</form>
</div>
</div>
</div>
)
}
export default SearchBar