filter features

hacker-stories/src/App.jsx

@@ -1,48 +1,73 @@
 import * as React from 'react';
 
-const list = [
+const App = () => {
-  {
+  const stories = [
-    title: 'React',
+    {
-    url: 'https://reactjs.org/',
+      title: 'React',
-    author: 'Jordan Walke',
+      url: 'https://reactjs.org/',
-    num_comments: 3,
+      author: 'Jordan Walke',
-    points: 4,
+      num_comments: 3,
-    objectID: 0,
+      points: 4,
-  },
+      objectID: 0,
-  {
+    },
-    title: 'Redux',
+    {
-    url: 'https://redux.js.org/',
+      title: 'Redux',
-    author: 'Dan Abramov, Andrew Clark',
+      url: 'https://redux.js.org/',
-    num_comments: 2,
+      author: 'Dan Abramov, Andrew Clark',
-    points: 5,
+      num_comments: 2,
-    objectID: 1,
+      points: 5,
-  },
+      objectID: 1,
-];
+    },
+  ];
 
-function App() {
+  const [searchTerm, setSearchTerm] = React.useState("Redux");
+
+
+  const handleSearch = (event) => {
+    setSearchTerm(event.target.value);
+  };
+
+  const searchedStories = stories.filter((story) =>
+    story.title.toLowerCase().includes(searchTerm.toLowerCase())
+  );
 
   return (
-    <>
     <div>
-      <h1>
+      <h1>My Hacker Stories</h1>
-        hello
+
-      </h1>
+      <Search onSearch={handleSearch} />
+
       <hr />
-      <label htmlFor='search'>Search:</label>
+
-      <input id="search" type="search"></input>
+      <List list={searchedStories} />
     </div>
-    <ul>
-    {list.map(function (item) {
-      return <li key={item.objectID}>
-        <span><a href={item.url}>{item.title}</a></span>
-        <span>{item.author}</span>
-        <span>{item.num_comments}</span>
-        <span>{item.points}</span>
-      </li>
-      })}
-    </ul>
-    </>
   );
-}
+};
+
+const Search = (props) => (
+  <div>
+    <label htmlFor="search">Search: </label>
+    <input id="search" type="text" value={props.search} onChange={props.onSearch} />
+  </div>
+);
+
+const List = (props) => (
+  <ul>
+    {props.list.map((item) => (
+      <Item key={item.objectID} item={item} />
+    ))}
+  </ul>
+);
+
+const Item = (props) => (
+  <li>
+    <span>
+      <a href={props.item.url}>{props.item.title}</a>
+    </span>
+    <span>{props.item.author}</span>
+    <span>{props.item.num_comments}</span>
+    <span>{props.item.points}</span>
+  </li>
+);
 
 export default App;

hacker-stories/src/main.jsx

@@ -1,10 +1,9 @@
-import { StrictMode } from 'react'
+import React from 'react';
-import { createRoot } from 'react-dom/client'
+import ReactDOM from 'react-dom/client';
-import './index.css'
+import App from './App';
-import App from './App.jsx'
 
-createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById('root')).render(
-  <StrictMode>
+  <React.StrictMode>
     <App />
-  </StrictMode>,
+  </React.StrictMode>
-)
+);