Create an Address Book with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create an address book app with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app address-book

with NPM to create our React project.

Also, we’ve to install the uuid package to let us assign unique IDs to the contact entries.

To do this, we run:

npm i uuid

Create the Address Book App

To create the address book app, we write:

import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";

export default function App() {
  const [contact, setContact] = useState({
    name: "",
    address: "",
    phone: ""
  });
  const [contacts, setContacts] = useState([]);

  const addContact = (e) => {
    e.preventDefault();
    const { name, address, phone } = contact;
    const formValid =
      name &&
      address &&
      /^[(]{0,1}[0-9]{3}[)]{0,1}[-s.]{0,1}[0-9]{3}[-s.]{0,1}[0-9]{4}$/.test(
        phone
      );
    if (!formValid) {
      return;
    }
    setContacts((contacts) => [
      ...contacts,
      { id: uuidv4(), name, address, phone }
    ]);
  };

  const deleteContact = (index) => {
    setContacts((contacts) => contacts.filter((_, i) => i !== index));
  };

  return (
    <div className="App">
      <form onSubmit={addContact}>
        <div>
          <label>name</label>
          <input
            value={contact.name}
            onChange={(e) =>
              setContact((contact) => ({ ...contact, name: e.target.value }))
            }
          />
        </div>
        <div>
          <label>address</label>
          <input
            value={contact.address}
            onChange={(e) =>
              setContact((contact) => ({ ...contact, address: e.target.value }))
            }
          />
        </div>
        <div>
          <label>phone</label>
          <input
            value={contact.phone}
            onChange={(e) =>
              setContact((contact) => ({ ...contact, phone: e.target.value }))
            }
          />
        </div>
        <button type="submit">add</button>
      </form>
      {contacts.map((contact, index) => {
        return (
          <div key={contact.id}>
            <p>name : {contact.name}</p>
            <p>address : {contact.address}</p>
            <p>phone : {contact.phone}</p>
            <button type="button" onClick={() => deleteContact(index)}>
              delete
            </button>
          </div>
        );
      })}
    </div>
  );
}

We define the contact state that’s used to store the form’s data.

And the contacts state is defined to store the contacts entries.

Next, we define the addContact function.

Inside it, we call e.preventDefault() to do client-side submission.

Then we check if name , address and phone values are valid.

If they are, then we call setContacts with a callback that returns a copy of the contacts array with a new entry at the end to add the entry.

uuidv4 returns the unique ID for the contact.

The deleteContact removes an entry by calling setContacts with a callback that returns a copy of the contacts array without the item at the given index .

Below that, we add a form with the onSubmit prop set to addContact so addContact can be run when we click on the button with type submit .

Inside the form, we define 3 inputs with the value prop to get the value from the state.

And their onChange props are set to functions that call setContact with a callback that returns a copy of the contact value but with the new value for the property that it sets.

e.target.value has the inputted value.

Below the form, we render the contacts state by calling map with a callback that returns a div with the property values of each contact entry displayed.

The key prop is set to contact.id so that React can distinguish between the entries.

And below that, we show the delete that calls deleteContact with index when we click it.

Conclusion

We can create an address book app easily with React and JavaScript.