Project 12 of 100 - Personnel Database with fetch()

Hey! I'm on a mission to make 100 React.js projects in 100 days starting October 31, 2020 and ending February 7th, 2021. 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

You don't have to tell me. Today's project is ugly. I mean U-G-L-Y. It has a tan background and minimal styling, and does almost nothing. However, after yesterday's Weather App project I wanted to practice using the fetch() API and handling promises in React. That means practice with conditional rendering. Today I followed the first part of this tutorial from CSS-Tricks.

The App

In the tutorial, the author recommends using the JSONPlaceholder API in the first part to grab an array of user data.

I usually like to switch things up just a little bit when I'm following a tutorial so I make sure I'm engaging with the material and really understand what I'm doing, so I used the Random User Generator API instead. It's also nice that their random users come with an image URL to easily give them a profile picture.

To create this application we use a single App component. The tutorial actually recommended something I never do which is write state as just a class object called state instead of using the constructor() method. I actually haven't done this before. Is that to avoid all of that this nonsense and not have to make any getters and setters?

class App extends React.Component {
  state = {
    isLoading: true,
    users: [],
    error: null
  }
  ...
}

The fetchUsers() function

The core of this application is the fetchUsers() function which is a class method we call within componentDidMount(). It's actually the only line in componentDidMount(), which is nice.

The component starts with an isLoading state set equal to true. When and only when the fetchUser() method's fetch call to the API returns data we load the response data into the state users property as an array and set isLoading to false. This state change triggers the conditional render of user data.

And if there's an error we catch it with fetch's catch(err) built-in error handling and pass the error message to state. We render an error message if state.error is anything other than null.

Takeaways

The way my rudimentary, dilettante self tried doing conditional rendering while waiting for an API response yesterday was basically a series of different, bespoke checks for data in state. That was dumb.

The CSS Tricks tutorial presents a demonstrably better, intuitive, more robust way of doing this by simply having a property in state that tells the rest of the application whether or not the API call is done.

5/5 stars - would code again. Next time I'll populate a nice table and have bootstrap in there so it looks better.