Fix: Reload bug

src/components/SearchBar.jsx

@@ -1,19 +1,32 @@
-export function SearchBar({ setSearch, search }) {
+export function SearchBar({ data, setDisplayData, setSearch, search }) {
+ const handleInputChange = (e) => {
+ const searchTerm = e.target.value;
+ setSearch(searchTerm);
+
+ const filteredUsers = data.filter((item) =>
+ item.name.toLowerCase().includes(searchTerm.toLowerCase()),
+ );
+ setDisplayData(filteredUsers);
+ };
+
  const handleClear = () => {
+ setDisplayData(data);
  setSearch('');
  };
 
  return (
- <form action="">
+ <form>
  <label htmlFor="item-filter">Search for an item here: </label>
  <input
  type="text"
  id="item-filter"
  value={search}
  placeholder="Search here"
- onChange={(e) => setSearch(e.target.value)}
+ onChange={handleInputChange}
  />
- <button onClick={handleClear}>X</button>
+ <button type="button" onClick={handleClear}>
+ Clear Input
+ </button>
  </form>
  );
 }

src/views/List.jsx

@@ -3,25 +3,20 @@ import { ListItem, SearchBar } from '../components';
 
 export function List({ data }) {
  const [search, setSearch] = useState('');
- const [displayData, setDisplayData] = useState(data);
+ const [displayData, setDisplayData] = useState([]);
 
  useEffect(() => {
- console.log('data', data);
- if (search === '') {
- setDisplayData(data);
- } else {
- const filteredItems = data.filter(
- (item) =>
- item.name !== '' &&
- item.name.toLowerCase().includes(search.toLowerCase()),
- );
- setDisplayData(filteredItems);
- }
- }, [search]);
+ setDisplayData([...data]);
+ }, [data]);
 
  return (
  <>
- <SearchBar setSearch={setSearch} search={search} />
+ <SearchBar
+ setDisplayData={setDisplayData}
+ data={data}
+ setSearch={setSearch}
+ search={search}
+ />
  <ul>
  {displayData.map((item) => (
  <ListItem key={item.id} name={item.name} />