completed

src/App.js

@@ -5,17 +5,22 @@
 */
 
 // Import the state hook
-import React from 'react';
+import React, {useState} from 'react';
 // Import the Posts (plural!) and SearchBar components, since they are used inside App component
 // Import the dummyData
+import dummyData from './dummy-data';
 import './App.css';
-
+import posts from './components/Posts/Posts';
+import Posts from './components/Posts/Posts';
+import SearchBar from './components/SearchBar/SearchBar'
 const App = () => {
+  const [posts, setPosts] = useState(dummyData);
+
   // Create a state called `posts` to hold the array of post objects, **initializing to dummyData**.
   // This state is the source of truth for the data inside the app. You won't be needing dummyData anymore.
   // To make the search bar work (which is stretch) we'd need another state to hold the search term.
 
-  const likePost = postId => {
+  const likePost  = postId => {
     /*
       This function serves the purpose of increasing the number of likes by one, of the post with a given id.
 
@@ -31,8 +36,8 @@ const App = () => {
 
   return (
     <div className='App'>
-      {/* Add SearchBar and Posts here to render them */}
-      {/* Check the implementation of each component, to see what props they require, if any! */}
+      <SearchBar/>
+      <Posts posts={posts} likePost={likePost}/>      {/* Check the implementation of each component, to see what props they require, if any! */}
     </div>
   );
 };

src/components/Posts/Posts.js

@@ -7,8 +7,13 @@ const Posts = (props) => {
   const { likePost, posts } = props;
 
   return (
+
     <div className='posts-container-wrapper'>
-      {/* Map through the posts array returning a Post component at each iteration */}
+      {
+        posts.map(post => (
+          <Post key={post.id} post={post}/>
+        ))
+      }
       {/* Check the implementation of Post to see what props it requires! */}
     </div>
   );