I try to use function components to do the ravenous project. The handleSortByChange function gives me an error stating that “Too many re-renders. React limits the number of renders to prevent an infinite loop.”
Please help
import React, {useState} from ‘react’;
import ‘./SearchBar.css’;
const sortByOptions = {
‘Best Match’: ‘best_match’,
‘Highest Rated’: ‘rating’,
‘Most Reviewed’: ‘review_count’
}
function SearchBar() {
const [search, setSearch] = useState({
term: ‘’,
location: ‘’,
sortBy: ‘best_match’
});
const getSortByClass = (sortByOption) => {
if(search.sortBy === sortByOption) {
return 'active';
} else {
return '';
}
}
const handleSortByChange = (sortByOption) => {
setSearch(prev => ({
...prev,
sortBy: sortByOption
}))
}
const renderSortByOptions = () => {
return Object.keys(sortByOptions).map((sortByOption) => {
let sortByOptionValue = sortByOptions[sortByOption];
return <li onClick={handleSortByChange(sortByOptionValue)} className={getSortByClass(sortByOptionValue)} key={sortByOptionValue}>{sortByOption}</li>
})
}
return(
<div className="SearchBar">
<div className="SearchBar-sort-options">
<ul>
{renderSortByOptions()}
</ul>
</div>
<div className="SearchBar-fields">
<input placeholder="Search Businesses" />
<input placeholder="Where?" />
</div>
<div className="SearchBar-submit">
<a href="#">Let's Go</a>
{/* <button>Let's Go</button> */}
</div>
</div>
)
}
export default SearchBar;