Before delving further into the implementations of the posting features in MERN Social, we will look at the composition of the Newsfeed view to showcase a basic example of how to design nested UI components that share state. The Newsfeed component will contain two main child components—a new post form and a list of posts from followed users:
The basic structure of the Newsfeed component will be as follows, with the NewPost component and the PostList component.
mern-social/client/post/Newsfeed.js:
<Card> <Typography type="title"> Newsfeed </Typography> <Divider/> <NewPost addUpdate={this.addPost}/> <Divider/> <PostList removeUpdate={this.removePost} ...