Finished the project

src/App.js

@@ -5,15 +5,20 @@
 */
 
 // 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 Posts from "./components/Posts/Posts";
+import SearchBar from "./components/SearchBar/SearchBar";
 // Import the dummyData
+import dummyData from "./dummy-data";
 import './App.css';
+import Post from './components/Posts/Post';
 
 const App = () => {
   // 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 [posts, setPosts] = useState(dummyData);
 
   const likePost = postId => {
     /*
@@ -27,11 +32,20 @@ const App = () => {
         - if the `id` of the post matches `postId`, return a new post object with the desired values (use the spread operator).
         - otherwise just return the post object unchanged.
      */
+    const newPost = posts.map(post => {
+      if (post.id === postId){
+        return {...post, likes: post.likes + 1}
+      } 
+      return post;
+    })
+    setPosts(newPost);
   };
 
   return (
     <div className='App'>
       {/* Add SearchBar and Posts here to render them */}
+      <SearchBar> </SearchBar>
+      <Posts posts={posts} likePost={likePost}> </Posts>
       {/* Check the implementation of each component, to see what props they require, if any! */}
     </div>
   );

src/components/Comments/Comments.js

@@ -9,6 +9,9 @@ const Comments = props => {
   return (
     <div>
       {/* map through the comments prop and render a Comment for every piece of data */}
+      {comments.map(comment => {
+        return <Comment comment={comment} key={comment.id}></Comment>;
+      })}
     </div>
   );
 };

src/components/Posts/LikeSection.js

@@ -16,14 +16,14 @@ const LikeSection = props => {
         className='like-section'
         key='likes-icons-container'
       >
-        <div className='like-section-wrapper'>
+        <div className='like-section-wrapper' onClick={likePost}>
           <FontAwesomeIcon icon={faHeart} />
         </div>
         <div className='like-section-wrapper'>
           <FontAwesomeIcon icon={faComment} />
         </div>
       </div>
-      <p className='like-number'>100 likes</p>
+      <p className='like-number'>{numberOfLikes} likes</p>
     </div>
   );
 };

src/components/Posts/Post.js

@@ -21,9 +21,9 @@ const Post = props => {
         />
       </div>
       {/* Is LikeSection getting all the props it needs to work correctly? */}
-      <LikeSection likePost={() => likePost(post.id)} />
+      <LikeSection likePost={() => likePost(post.id)} numberOfLikes={post.likes}/>
       {/* Comments also wants its props! */}
-      <Comments />
+      <Comments comments={post.comments}/>
     </div>
   );
 };