add state to content

package.json

@@ -15,8 +15,7 @@
     "husky": "^9.1.6",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
-    "react-bootstrap": "^2.10.5",
-    "save": "^2.9.0"
+    "react-bootstrap": "^2.10.5"  
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

src/App.jsx

@@ -2,15 +2,16 @@ import "./App.css";
 import NavBar from "./components/NavBar.jsx";
 import ListGroup from "./components/ListGroup.jsx";
 import SideBar from "./components/SideBar.jsx";
-import Content from "./Components/Content.jsx";
+import Content from "./components/Content.jsx";
+
 function App() {
   return (
     <>
       <NavBar />
       {/* TODO: pull container   div or component?? */}
       <div className='container'>
         <ListGroup className='sidebar left-sidebar' />
-        <Content initialPostCount={5} />
+        <Content initialPostCount={4} />
         <SideBar />
       </div>
     </>

src/Components/Content.jsx

@@ -1,15 +1,30 @@
 import PostList from "./PostList";
 import {PropTypes} from "prop-types";
+import { useState } from "react";
 
 //TODo: combine heading and h1 div
 function Content({ initialPostCount }) {
+
+
+  const [count, setCount] = useState(initialPostCount);
+
+  const handleClick = () => {
+    console.log("clicked" + count);
+    if (count < 4) {
+      setCount(count + 1);
+    } else {
+      setCount(3);
+    }
+  };
   return (
     <div className='content'>
       <div className='heading'>
         <h1 className='centered'>BreadIt </h1>
       </div>
-      <PostList number={initialPostCount} />
-      <button className='centeredButton'>Load More Topics</button>
+      <PostList number={count} />
+      <button className='centeredButton' onClick={handleClick}>
+        Load More Topics
+      </button>
     </div>
   );
 }

src/Components/PostList.jsx

@@ -1,7 +1,7 @@
-import DropDown from "./ArticleStub.jsx";
 import { useState, useEffect } from "react";
 import Accordion from "react-bootstrap/Accordion";
 import { PropTypes } from "prop-types";
+import DropDown from "./ArticleStub.jsx";
 
 function PostList({ number }) {
   let [usersPosts, setUsersPosts] = useState([]);
@@ -11,7 +11,8 @@ function PostList({ number }) {
       .then((json) => {
         setUsersPosts(usersPosts.concat(json));
       });
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [number]);
 
   return (
     <Accordion defaultActiveKey='0'>