react add search functionality alongside categories - reactjs

Question

import axios from 'axios'
import React from 'react'
import { useState, useEffect } from 'react'
import {useHistory} from 'react-router-dom'
import Spinner from './Spinner'
const Home = () => {
const [search, setSearch] = useState({
category: 'All',
searchBar: '',
})
const handleCategory = e => {
setSearch({...search, category: e.target.id})
}
const handleSearch = e => {
setSearch({...search, searchBar: e.target.value})
}
// This only works for the categories
const filteredPreviews = search.category === 'All'
? previews
: previews.filter(preview => preview.category === search.category)
return (
<div className="container">
<section className="main-nav">
<div className="main-nav-content">
<ul className='categories'>
<li><a onClick={(e) => handleCategory(e)} id='All'>All</a></li>
<li><a onClick={(e) => handleCategory(e)} id='Action'>Action</a></li>
<li><a onClick={(e) => handleCategory(e)} id='Adventure'>Adventure</a></li>
<li><a onClick={(e) => handleCategory(e)} id='Survival'>Survival</a></li>
<li><a onClick={(e) => handleCategory(e)} id='Simulation'>Simulation</a></li>
<li><a onClick={(e) => handleCategory(e)} id='Racing'>Racing</a></li>
</ul>
<ul className='main-input'>
<li>
<i className="fas fa-search"></i>
<input type="text" onChange={(e) => handleSearch(e)} placeholder="Search Games..." />
</li>
</ul>
</div>
</section>
<section className="games">
{
filteredPreviews.map(preview => (
<div>
<h3>{preview.title}</h3>
<p>{preview.category}</p>
</div>
))}
</section>
</div>
)
}
export default Home
Sample Data
const previews = [
{
title: "Red Dead Redemption 2",
category: "Survival",
},
{
title: "FEAR",
category: "Horror",
},
{
title: "Battlefield 1",
category: "Action",
},
];
So I have a function that handles the current category that the user clicks on and displays the previews accordingly, but I cannot figure out how I let the user use the search input too, I tried using || conditionals and other things but in the end I couldnt figure it out, any help is appreciated!

Answer 1

import React from "react";
import { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
const previews = [
{
title: "Red Dead Redemption 2",
category: "Survival"
},
{
title: "FEAR",
category: "Horror"
},
{
title: "Battlefield 1",
category: "Action"
}
];
const Home = () => {
const [search, setSearch] = useState({
category: "All",
searchBar: ""
});
const handleCategory = (e) => {
setSearch({ ...search, category: e.target.id });
};
const handleSearch = (e) => {
setSearch({ ...search, searchBar: e.target.value,category :'' });
};
// This only works for the categories
// Now this works for search too
const filteredPreviews = () => {
const { category, searchBar } = search;
if (category === "All" || (searchBar && searchBar === "All")) {
return previews;
}
const filtered = previews.filter((preview) => {
if (
preview.category === category ||
(searchBar && searchBar === preview.category)
) {
return preview;
}
});
return filtered;
};
return (
<div className="container">
<section className="main-nav">
<div className="main-nav-content">
<ul className="categories">
<li>
<a onClick={(e) => handleCategory(e)} id="All">
All
</a>
</li>
<li>
<a onClick={(e) => handleCategory(e)} id="Action">
Action
</a>
</li>
<li>
<a onClick={(e) => handleCategory(e)} id="Adventure">
Adventure
</a>
</li>
<li>
<a onClick={(e) => handleCategory(e)} id="Survival">
Survival
</a>
</li>
<li>
<a onClick={(e) => handleCategory(e)} id="Simulation">
Simulation
</a>
</li>
<li>
<a onClick={(e) => handleCategory(e)} id="Racing">
Racing
</a>
</li>
</ul>
<ul className="main-input">
<li>
<i className="fas fa-search"></i>
<input
type="text"
onChange={(e) => handleSearch(e)}
placeholder="Search Games..."
/>
</li>
</ul>
</div>
</section>
<section className="games">
{filteredPreviews().map((preview) => (
<div>
<h3>{preview.title}</h3>
<p>{preview.category}</p>
</div>
))
}
</section>
</div>
);
};
export default Home;

Answer 2

import axios from "axios";
import React from "react";
import { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
const previews = [
{
title: "Red Dead Redemption 2",
category: "Survival"
},
{
title: "FEAR",
category: "Horror"
},
{
title: "Battlefield 1",
category: "Action"
}
];
const Home = () => {
const [search, setSearch] = useState({
category: "All",
searchBar: ""
});
const handleCategory = (e) => {
setSearch({ ...search, category: e.target.id });
};
const handleSearch = (e) => {
setSearch({ ...search, searchBar: e.target.value });
};
// This only works for the categories
// Now this works for search too
const filteredPreviews = () => {
const { category, searchBar } = search;
if (category === "All" || (searchBar && searchBar === "All")) {
return previews;
}
const filtered = previews.filter((preview) => {
if (
preview.category === category ||
(searchBar && searchBar === preview.category)
) {
return preview;
}
});
return filtered;
};
return (
<div className="container">
<section className="main-nav">
<div className="main-nav-content">
<ul className="categories">
<li>
<a onClick={(e) => handleCategory(e)} id="All">
All
</a>
</li>
<li>
<a onClick={(e) => handleCategory(e)} id="Action">
Action
</a>
</li>
<li>
<a onClick={(e) => handleCategory(e)} id="Adventure">
Adventure
</a>
</li>
<li>
<a onClick={(e) => handleCategory(e)} id="Survival">
Survival
</a>
</li>
<li>
<a onClick={(e) => handleCategory(e)} id="Simulation">
Simulation
</a>
</li>
<li>
<a onClick={(e) => handleCategory(e)} id="Racing">
Racing
</a>
</li>
</ul>
<ul className="main-input">
<li>
<i className="fas fa-search"></i>
<input
type="text"
onChange={(e) => handleSearch(e)}
placeholder="Search Games..."
/>
</li>
</ul>
</div>
</section>
<section className="games">
{filteredPreviews().map((preview) => (
<div>
<h3>{preview.title}</h3>
<p>{preview.category}</p>
</div>
))}
</section>
</div>
);
};
export default Home;