Refactored App props to state

Author: mdbytes

wild-things/src/App.js

@@ -16,6 +16,8 @@ import { BrowserRouter as Router, Route } from "react-router-dom";
 // Import EmailJs for initiation
 import emailjs from "@emailjs/browser";
 import { EMAILJS_USER } from "./config/keys";
+import { WP_REST_GET_POSTS_URL } from "./config/keys";
+import axios from "axios";
 
 // Import main site components
 import NavBar from "./components/NavBar";
@@ -36,8 +38,21 @@ import Footer from "./components/Footer";
  * @returns primary router component of the App
  */
 class App extends Component {
+  state = { posts: [], selectedPost: "" };
+
   componentDidMount() {
-    console.log("app props", this.props.posts);
+    let blogPosts = [];
+    axios.get(WP_REST_GET_POSTS_URL).then((response) => {
+      blogPosts = response.data;
+      for (let blog of blogPosts) {
+        blog.excerpt.rendered = blog.excerpt.rendered
+          .replace(/(^"|"$)/g, "")
+          .replace("[", "")
+          .replace("]", "");
+      }
+      this.setState({ posts: blogPosts });
+      console.log("state", this.state);
+    });
   }
 
   render() {
@@ -48,15 +63,15 @@ class App extends Component {
           <ScrollToTop />
           <NavBar />
           <Route exact path="/">
-            <LandingPage posts={this.props.posts} />
+            <LandingPage posts={this.state.posts} />
           </Route>
           <Route exact path="/about">
             <AboutPage />
           </Route>
           <Route exact path="/posts">
-            <PostsPage posts={this.props.posts} />
+            <PostsPage posts={this.state.posts} />
           </Route>
-          <Route exact path="/post" posts={this.props.posts}>
+          <Route exact path="/post" posts={this.state.posts}>
             <PostPage />
           </Route>
           <Route exact path="/contact">

wild-things/src/index.js

@@ -9,7 +9,6 @@
 
 import React from "react";
 import ReactDOM from "react-dom";
-import axios from "axios";
 
 // Import styling, which is compiled from Sass - customized Bootsrap v5.3
 import "glightbox/dist/css/glightbox.css";
@@ -21,27 +20,9 @@ import "bootstrap/dist/js/bootstrap.js";
 
 import App from "./App";
 
-import { WP_REST_GET_POSTS_URL } from "./config/keys";
-
-const startApp = async () => {
-  let blogPosts = [];
-  await axios.get(WP_REST_GET_POSTS_URL).then((response) => {
-    console.log("axios called");
-    blogPosts = response.data;
-    for (let blog of blogPosts) {
-      blog.excerpt.rendered = blog.excerpt.rendered
-        .replace(/(^"|"$)/g, "")
-        .replace("[", "")
-        .replace("]", "");
-    }
-
-    ReactDOM.render(
-      <React.StrictMode>
-        <App posts={blogPosts} />
-      </React.StrictMode>,
-      document.getElementById("root")
-    );
-  });
-};
-
-startApp();
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);