Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@NaveenDA
Created September 12, 2020 12:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save NaveenDA/9df607391f645ae93b96dbbe5b1738f0 to your computer and use it in GitHub Desktop.
Save NaveenDA/9df607391f645ae93b96dbbe5b1738f0 to your computer and use it in GitHub Desktop.
import React, { useState } from "react";
import data from "./data.json";
import Item from "./item";
const SettingsPage = () => {
const [searchData, setSearchData] = useState(data);
const searchItem = (query) => {
if (!query) {
setSearchData(data);
return;
}
query = query.toLowerCase();
const finalResult = [];
data.forEach((item) => {
if (
item.name.toLowerCase().indexOf(query) !== -1 ||
item.tags.includes(query)
) {
finalResult.push(item);
}
});
setSearchData(finalResult);
};
return (
<div>
<p className="title"> Technologies</p>
<div className="search-container">
<input
type="search"
onChange={(e) => searchItem(e.target.value)}
placeholder="Search Technologies"
/>
</div>
<div className="item-container">
{searchData.map((item) => (
<Item {...item} key={item.name} />
))}
</div>
</div>
);
};
export default SettingsPage;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment