Create a Recipe App 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 a recipe 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 recipe-app

with NPM to create our React project.

We also need the uuid package to let us generate unique IDs for our recipe items.

To do this, we run:

npm i uuid

Create the Recipe App

To create the recipe app, we write:

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

export default function App() {
  const [recipe, setRecipe] = useState({
    name: "",
    ingredients: "",
    steps: ""
  });
  const [recipes, setRecipes] = useState([]);

  const addRecipe = (e) => {
    e.preventDefault();
    const { name, ingredients, steps } = recipe;
    const formValid = name && ingredients && steps;
    if (!formValid) {
      return;
    }
    setRecipes((recipes) => [
      ...recipes,
      {
        id: uuidv4(),
        ...recipe
      }
    ]);
  };

  const deleteRecipe = (index) => {
    setRecipes((recipes) => recipes.filter((_, i) => i !== index));
  };

  return (
    <div>
      <style>
        {`
        .content {
          white-space: pre-wrap;
        }
        `}
      </style>
      <form onSubmit={addRecipe}>
        <div>
          <label>name</label>
          <input
            value={recipe.name}
            onChange={(e) =>
              setRecipe((recipe) => ({ ...recipe, name: e.target.value }))
            }
          />
        </div>
        <div>
          <label>ingredients</label>
          <input
            value={recipe.ingredients}
            onChange={(e) =>
              setRecipe((recipe) => ({
                ...recipe,
                ingredients: e.target.value
              }))
            }
          />
        </div>
        <div>
          <label>steps</label>
          <textarea
            value={recipe.steps}
            onChange={(e) =>
              setRecipe((recipe) => ({ ...recipe, steps: e.target.value }))
            }
          ></textarea>
        </div>
        <button type="submit">add recipe</button>
      </form>
      {recipes.map((r, index) => {
        return (
          <div key={r.id}>
            <h1>{r.name}</h1>
            <h2>ingredients</h2>
            <div className="content">{r.ingredients}</div>
            <h2>steps</h2>
            <div className="content">{r.steps}</div>
            <button className="button" onClick={() => deleteRecipe(index)}>
              delete
            </button>
          </div>
        );
      })}
    </div>
  );
}

We have the recipe state which is used to store the form data.

recipes has the recipe entries.

Then we define the addRecipe function that lets us add a recipe.

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

Then we check if name , ingredients , and steps are set.

If they are, then we call setRecipes to add the entry.

We pass in a callback that takes the existing recipes value, then we return a copy of it with an object that has the new entry at the end.

We call uuidv4 to return a unique ID for the new entry.

The deleteRecipe function calls setRecipes with a callback that takes the existing recipes . Then it returns a copy of it without the entry at the given index .

Below that, we add the style element to style the steps.

And we have the form with the onSubmit prop set to addRecipe to add an entry when we click on the button with type submit .

Inside the form, we have the inputs with an onChange prop that are set to functions that call setRecipe to set the inputted value to a property in the recipe object.

Below the form, we render the recipes values into a div.

Inside it, we show the name , ingredients , and steps .

And below that, we have a button that calls deleteRecipe with the index when we click it.

Conclusion

We can create a recipe app with React and JavaScript.