Project 80 of 100 - Birthday Reminders Application in React

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

Day 80 was a fun little project that I got from a Freecodecamp video where John Smilga from the Coding Addict Youtube channel shares 15 short React projects and broadcasts how it is built.

I think if there was a deadly fact about how my 100 days of projects has gone (probably closer to 200 days at this point) is that barebones non-React coding takes up the majority of the time, particularly of course CSS, but if you share an ugly project people don't want to look at it. So the nice thing about John's tutorials series is that the starter files come with the CSS written, so you just get to focus on the React projects. I highly recommend giving his videos a watch.

This tutorial emphasized the power of the useState hook which I've been using for quite a while now, but it's sometimes easy to forget how effective it is with such little code. In a previous project I had to revert to class components and adding state within the constructor and the whole exercise just felt brutally clunky. Hooks are a godsend.

Our simple App.js file simply brings in data from a local JSON file that has info on made-up individuals and their birthdays, and then iterates over the array:

import React, { useState } from 'react';
import data from './data';
import List from './List';
function App() {
  const [people, setPeople] = useState(data)

  return (
    <main>
      <section className='container'>
        <h3>{people.length} birthdays today</h3>
        <List people={people} />
        <button onClick={() => setPeople([])}>
          clear all
        </button>
      </section>
    </main>
  )
}

export default App;

As you can see, most of the heavy lifting from a UI perspective is happening in the List component that we build elsewhere, but the data manipulating is all happening here, and we simply pass the data down to the List via props.

In the List component, we build and export a simple list that iterates through the people data passed through props:

const List = ({people}) => {
  return (
    <>
      {people.map((person) => {
        const {id,name,age,image} = person;
        return <article key={id} className="person">
          <img src={image} alt={name} />
          <div>
            <h4>{name}</h4>
            <p>{age} years</p>
          </div>
        </article>
      })}
    </>
  );
};

This was a simple demonstration of the power of the useState hook in React and how easy it is to also manipulate state with the setter function for that hook (done in the button component onClick). You can imagine that this would be a great tool if hooked up to a real database.

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.