Create an Issue Tracker 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 issue tracker 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 issue-tracker

with NPM to create our React project.

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

To do this, we run:

npm i uuid

Create the Issue Tracker

To create the issue tracker, we write:

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

export default function App() {
  const [issue, setIssue] = useState({
    description: "",
    priority: "low",
    assignee: ""
  });
  const [issues, setIssues] = useState([]);

  const addIssue = (e) => {
    e.preventDefault();
    const { description, priority, assignee } = issue;
    const formValid = description && priority && assignee;
    if (!formValid) {
      return;
    }
    setIssues((issues) => [
      ...issues,
      { id: uuidv4(), description, priority, assignee }
    ]);
  };

  const deleteIssue = (index) => {
    setIssues((issues) => issues.filter((_, i) => i !== index));
  };

  return (
    <div className="App">
      <form onSubmit={addIssue}>
        <div>
          <label>description</label>
          <input
            value={issue.description}
            onChange={(e) =>
              setIssue((issue) => ({ ...issue, description: e.target.value }))
            }
          />
        </div>

        <div>
          <label>priority</label>
          <select
            value={issue.priority}
            onChange={(e) =>
              setIssue((issue) => ({ ...issue, priority: e.target.value }))
            }
          >
            <option>low</option>
            <option>medium</option>
            <option>high</option>
          </select>
        </div>

        <div>
          <label>assignee</label>
          <input
            value={issue.assignee}
            onChange={(e) =>
              setIssue((issue) => ({ ...issue, assignee: e.target.value }))
            }
          />
        </div>
        <button type="submit">add issue</button>
      </form>
      {issues.map((issue, index) => {
        return (
          <div key={issue.id}>
            <p>description: {issue.description}</p>
            <p>priority: {issue.priority}</p>
            <p>assignee: {issue.assignee}</p>
            <button type="button" onClick={() => deleteIssue(index)}>
              delete issue
            </button>
          </div>
        );
      })}
    </div>
  );
}

We define the issue state which is an object.

Then we define the issues state which is an array.

Next, we define the addIssue function to add items to issues .

In it, we call e.preventDefault to do client-side form submission.

Then we check if description , priority and assignee have values.

If they have, then we call setIssues with a callback that returns a copy of the issues array with a new entry added to it.

The uuidv4 function returns a unique ID for the issues entry.

Next, we define the deleteIssue function which calls setIssues with a callback that returns a copy of the issues array without the entry with the given index .

Below that, we add a form with the onSubmit prop set to addIssue to let us add an entry to the issues array.

Inside it, we have 2 inputs and one select element with their value and onChange props set.

value has the value of each field.

And the onChange prop let us set the values.

We set them to functions that call setIssue with a callback that returns a copy of the issue object with a new property overwriting the existing one.

Then button with type submit runs the onSubmit handler when we click it.

Below that, we call issues.map to render divs with the issue values.

And below that, we add a button with the onClick prop set to a function that calls deleteIssue to remove the issue with the given index .

Conclusion

We can create an issue tracker with React and JavaScript.