FindPeople component

To display the who to follow feature, we will create a component called FindPeople, which can be added to any of the views or rendered on its own. In this component, we will first fetch the users not followed by calling the findPeople method in componentDidMount.

mern-social/client/user/FindPeople.js:

componentDidMount = () => {   const jwt = auth.isAuthenticated()   findPeople({     userId: jwt.user._id   }, {     t: jwt.token   }).then((data) => {     if (data.error) {       console.log(data.error)     } else {       this.setState({users: data})     }   })}

The fetched list of users will be iterated over and rendered in a Material-UI List component, with each list item containing the user's avatar, name, a link to the profile page, and a Follow button.

mern-social/client/user/FindPeople.js ...

Get Full-Stack React Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.