/problem-set-8_2

More practice with useEffect

Problem Set: useEffect

Working with the useEffect Hook

Directions

Create a UserCard component.

  • The component should render a styled user card.
  • The component should take a userId as props.
  • Upon mounting, the component should make a fetch request to https://reqres.in/api/users/{userId}. Then it should display the following user data:
    • email
    • first_name
    • last_name
    • avatar
  • While waiting for a response, (as in, when the component first mounts) the card should display "Loading..." for each of these fields.

Extra Credit

  • Experiment with Material UI for some out-of-the-box styling on your components.
  • reqres.in gives us twelve mock user profiles. Add in a search feature to render a card by User ID.

Demo Project