CODEWITHSUNDEEP
reactjsreact-hooks
tjStack
tjStack

Reputation: 51

How to add multiple item too array of objects?

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;

Upvotes: 1

Views: 1397

Answers (2)

Ttenochtchi Bush
Ttenochtchi Bush

Reputation: 62

@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
    };

Upvotes: 0

DecPK
DecPK

Reputation: 25408

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.

Upvotes: 2

Related Questions