How to create new item with each button press react.js?

Question

I'm trying to display a new item each time a button is pressed. What I'm able to get right now is for state to update the same item depending on what button is pressed, but it's not generating a new item.

import React, { useState } from "react";

function Menu() {
  const [menuItem, setMenuItem] = useState("");
  const [menuList, setMenuList] = useState([]);

  function addNewItem(e) {
    e.preventDefault();
    const newItem = [
      "Spaghetti",
      "Alfredo",
      "Lasagna",
      "Tortellini",
      "Shrimp Scampi",
      "Pizza",
    ];
    setMenuList([...menuList].concat(newItem));
    setMenuItem(e.target.value);
  }

  return (
    <div>
      <button onClick={addNewItem} value="Spaghetti">
        Spaghetti
      </button>
      <button onClick={addNewItem} value="Alfredo">
        Alfredo
      </button>
      <button onClick={addNewItem} value="Lasagna">
        Lasagna
      </button>
      <button onClick={addNewItem} value="Tortellini">
        Tortellini
      </button>
      <button onClick={addNewItem} value="Shrimp Scampi">
        Shrimp Scampi
      </button>
      <button onClick={addNewItem} value="Pizza">
        Pizza
      </button>
      <div>{menuItem}</div>
    </div>
  );
}

export default Menu;

What you are asking and what you are doing are a confusing, what you are doing is that each time any button is clicked you are calling addNewItem and the new item is an array of food so you ending up with an array of arrays. Is this what you want? And do you want to show the newly added item on the screen? Or do you just want to add it the array of items?. Please elaborate — Mustafa
– Mustafa, Commented Oct 15, 2022 at 15:17
I do want to show it on screen as well as add it to the array of food. I'm not intending to create an array of arrays. — James McLellan
– James McLellan, Commented Oct 15, 2022 at 18:32

Mustafa · Accepted Answer · 2022-10-16 00:46:50Z

2

the way the addNewItem works currently is that it adds an array of all Items each time a button is clicked, instead it should only add the new item which the food name.

convert your addNewItem function to this and it should work

function addNewItem(e) {
    e.preventDefault();
    const newItem = e.target.value;
    setMenuList(prevList => [...prevList, newItem]);
    setMenuItem(newItem);
  }

To Also display all the items in the array do this

return (
    <div>
      <button onClick={addNewItem} value="Spaghetti">
        Spaghetti
      </button>
      <button onClick={addNewItem} value="Alfredo">
        Alfredo
      </button>
      <button onClick={addNewItem} value="Lasagna">
        Lasagna
      </button>
      <button onClick={addNewItem} value="Tortellini">
        Tortellini
      </button>
      <button onClick={addNewItem} value="Shrimp Scampi">
        Shrimp Scampi
      </button>
      <button onClick={addNewItem} value="Pizza">
        Pizza
      </button>
      {
        menuList.map((item) => {
           return <div>{item}</div>
        })
      }
      
    </div>
  );

edited Oct 16, 2022 at 0:46

answered Oct 15, 2022 at 22:14

Mustafa

3533 silver badges11 bronze badges

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

2 Comments

James McLellan Over a year ago

That doesn't solve the issue. It performs the same function as how I had it before. Each time, the state is replaced with the value of the button I click. It's odd, though, because if I console.log(menuList), it will log the items in the array correctly.

Mustafa Over a year ago

So you also want to display a list of all items in the array not just the last item added? If so then check the update

Anu · Accepted Answer · 2022-10-15 16:56:19Z

-1

Actually spreading the array makes it only add unique items to the array. if you want to merge two arrays including duplicates just concat without spreading.

 setMenuList([...menuList].concat(newItems)); //duplicates in the second array doesnot get added
    setMenuList([...menuList, ...newItems]); //shorter version of above
    setMenuList(menuList.concat(newItems)); // merge two arrays as it is
setMenuList([...(m.concat(newItems))])

edited Oct 15, 2022 at 16:56

answered Oct 15, 2022 at 14:56

Anu

3891 silver badge4 bronze badges

3 Comments

Anu Over a year ago

try this rather setMenuList([...(m.concat(newItems))])

Mustafa Over a year ago

Spreading the array in Javascript doesn't remove duplicates unless the new item you are adding is an object with a key that is already existing in the array so if I do ``` [...[1,2,3], 1]``` will give me ``` [1,2,3,1] ````

Anu Over a year ago

Didn't realize it could be misleading though

Collectives™ on Stack Overflow

How to create new item with each button press react.js?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related