As a beginner in Remix React projects, I am currently struggling to grasp the project's structure. My goal is to create a SearchBar Component within the Header that displays the first 10 products based on user input. Below is the code snippet of my Search Component within the Header Component:
function SearchForm() {
const SEARCH_PRODUCTS_QUERY = `
query SearchProducts($query: String!) {
products(query: $query, first: 10) {
edges {
node {
id
title
handle
description
}
}
}
}
`;
const [searchTerm, setSearchTerm] = useState('');
const [searchResults, setSearchResults] = useState([]);
function handleSearch() {
// console.log('handle search', searchTerm);
}
return (
<div>
<input
type="text"
placeholder="search"
value={searchTerm}
onChange={(event) => setSearchTerm(event.target.value)}
/>
<button type="button" onClick={handleSearch}>
Search
</button>
<ul>
{searchResults.map((product) => (
<li key={product.node.id}>{product.node.title}</li>
))}
</ul>
</div>
);
}
I have simply integrated this into the Header Component. However, I am unsure whether to manage the query here or if I require API endpoints for the response body. How can I properly implement the handleSearch function to achieve functionality? Should the query be contained within this component?