How to add multiple item too array of objects?

Question

I made a list of items, I can add items but I can only add one or the other, I can't add both. The description value gets populated correctly however the Recipe does not.

Here is my codesandbox I made.

https://codesandbox.io/s/magical-pond-vtu51?file=/src/App.js

import React, { useState } from "react";

const NewMenu = () => {
  const [recipeName, setRecipeName] = useState("");
  const [descriptionItem, setDescriptionItem] = useState("");
  const [items, setItems] = useState([
    { itemName: "Chicken", description: "chicken test", id: 0 }
  ]);

  const handleAddButtonClick = (e) => {
    e.preventDefault();
    const newItem = {
      recipeName: recipeName,
      description: descriptionItem,
      id: items.length
    };
    const newItems = [...items, newItem];

    setItems(newItems);
    // setRecipeName("");
    // setDescriptionItem("");
    console.log(items.description);
    console.log(items.id); //...
  };

  const removeTodo = (id) => {
    console.log(id);
    setItems(items.filter((item) => item.id !== id));
  };

  console.log(descriptionItem);
  return (
    <div>
      <form>
        <input
          value={recipeName}
          onChange={(event) => setRecipeName(event.target.value)}
          className="add-item-input"
          placeholder="Add a recipe..."
        />

        <input
          value={descriptionItem}
          onChange={(event) => setDescriptionItem(event.target.value)}
          className="add-item-input"
          placeholder="Add a Description..."
        />

        <input type="submit" onClick={(e) => handleAddButtonClick(e)} />
      </form>

      {items.map((item, index) => (
        <div>
          Recipe: {item.itemName} Description: {item.description}
          <button onClick={() => removeTodo(item.id)}>Remove </button>{" "}
        </div>
      ))}
    </div>
  );
};

export default NewMenu;

It is advised to add minimal reproducible code.

DecPK
– DecPK

2021-07-05 03:00:27 +00:00
Commented Jul 5, 2021 at 3:00 — DecPK
– DecPK, Commented Jul 5, 2021 at 3:00

DecPK · Accepted Answer · 2021-07-05 02:33:03Z

2

The new Item that you are adding should have an itemName property, not the recipeName

codesandbox

const newItem = {
  itemName: recipeName,  // change from recipeName to itemName
  description: descriptionItem,
  id: items.length
};

Either you can change from itemName to recipeName in the JSX or change from recipeName to itemName when adding a newItem.

answered Jul 5, 2021 at 2:33

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ttenochtchi Bush · Accepted Answer · 2021-07-05 02:50:35Z

0

@decpk is right. Your question is easy to fix.

When you create state value for items

const [items, setItems] = useState([
    { itemName: "Chicken", description: "chicken test", id: 0 }
]);

items state has 3 property : itemName, description and id

But you write wrong property in Line 12

const newItem = {
      recipeName: recipeName,         // property need to change itemName not recipeName
      description: descriptionItem,
      id: items.length
    };

answered Jul 5, 2021 at 2:50

Ttenochtchi Bush

623 bronze badges

Collectives™ on Stack Overflow

How to add multiple item too array of objects?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related