Project 81 of 100 - Ben Awad Interview Project

Hey! I'm on a mission to make 100 React.js projects. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to today's deployed app: Link
Link to the repo: github

Today I'm publishing a project that I undertook following along with Ben Awad's Beginner React Coding Interview on Youtube. As goofy as today's project is, it's actually pretty reflective of the types of basic React questions you'll probably be asked in an entry level interview. I know this because the day after I did this project, I took an online React evaluation for a pretty big, well-known company and there wasn't much on the evaluation that wasn't covered in this project.

A simple way of putting this is the following: If you can master JSX, props, state, hooks, useEffect, class components, using the native Javascript fetch API, and conditional rendering, you're pretty far along with your React skills.

For the final part of this project, Ben asks Clement to fetch data from a random user data API, store it in state, and display the user data with a picture and full name on the page. I accomplished this with the fetch API stored in the useEffect method of the App component:

  const [webData, setWebData] = useState([]);

  useEffect(() => {
    fetch("https://randomuser.me/api")
      .then((response) => response.json())
      .then((data) => setWebData([data.results[0]]));
  }, []);

As you can see we hit the API, access the results property I found on the JSON object, and from that access the first returned user results and store it in state in an array. This places the user object in an array representing all users.

We then create a UserCard component to display data from this user object when we're ready to pass down the data. Here's the JSX:

import React from "react";

export default function UserCard({ user }) {
  const { picture, name } = user;

  return (
    <div className="userCard">
      <img src={picture.large} alt={name.first} />
      <h2>
        {name.first} {name.last}
      </h2>
    </div>
  );
}

But we still haven't called the UserCard in the App component. So I created a variable to store all of the user card elements.

  const userCardsList =
    webData &&
    webData.map((pageResults, idx) => {
      return (<UserCard user={pageResults} key={idx} />)
    });

As you can see, if the state variable webData is defined, then we return a list of UserCards, one for each user object found. This works well because it will display data for one user just as well as 100 users.

Here is our final App component JSX (I stripped out the header JSX because it was just decoration):

  return (
    <div className="app">
      ...
      <main>
        <div className='app__mainButtonContainer'>
          <button onClick={addNewUser}>
            Append new user
          </button>
        </div>
        {webData && userCardsList}
      </main>
    </div>
  );

As you can see above, we do have a button for hitting the API again, and adding another user object to our webData state variable. That function is called addNewUser and is a handler on the App function component, before the returned JSX:

  const addNewUser = () => {
    fetch(`https://randomuser.me/api?page=${currentPage}`)
      .then((response) => response.json())
      .then((data) => setWebData((prevData) => [...prevData, data.results[0]]));
    setCurrentPage(currentPage + 1);
  };

We had to also create a new currentPage state variable to accommodate requesting specific pages from the API, which starts at page 1 by default:

  const [currentPage, setCurrentPage] = useState(2);

As ugly as this project is, if you can build this in less than 15 or 20 minutes and understand everything that's going on, I think you're probably ready to interview, or at least start building cool portfolio projects with React. Like I said, I took a React coding evaluation a few days ago and these were the subjects covered, so Ben's Youtube video actually hit the nail on the head, and was great preparation. Watch it!

If you like projects like this and want to stay up to date with more, check out my Twitter @jwhubert91, I follow back! See you tomorrow for another project.