Click and insert object in one array to another empty array using react hooks

Question

I have array of objects (items) with button clickHandler function. When you click on button, it should add that object to new array named ‘myNewArray’. Please help me to achieve this. I added demo object inside array ‘myNewArray’.

Explaination: If i click on category button '1-furniture', that object will added to new array named 'myNewArray'

import React, { useState } from "react";

const App = () => {
const [items, setItems] = useState([
{ name: "Furniture", categoryKey: 1 },
{ name: "Shoes", categoryKey: 2 },
{ name: "Electronics", categoryKey: 3 },
{ name: "Clothes", categoryKey: 4 },
{ name: "Grocery", categoryKey: 5 },
]);
const [myNewArray, setMyNewArray] = useState([{ name: "demo-item", categoryKey: 100 }]);

const clickHandler = (categoryKey: any) => {
console.log(categoryKey);
};

return (
<div>
  {items.map((item) => (
    <button onClick={() => clickHandler(item.categoryKey)} key={item.categoryKey}>
      {item.categoryKey}-{item.name}
    </button>
  ))}
  <h4>New array after clicking on item from above array[items]</h4>
  {myNewArray.map((item) => (
    <button onClick={() => clickHandler(item.categoryKey)} key={item.categoryKey}>
      {item.categoryKey}-{item.name}
    </button>
  ))}
</div>
);
};

export default App;

Sachila Ranawaka · Accepted Answer · 2022-12-13 17:19:21Z

1

just use set method in the useState

const clickHandler = (item: any) => {
  setMyNewArray(prev => [...prev, {name:item.name,categoryKey: item.categoryKey}])
};

and pass item in the click

onClick={() => clickHandler(item)}

edited Dec 13, 2022 at 17:19

answered Dec 13, 2022 at 17:06

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

1 Comment

MeAtWork Over a year ago

Instead of myNewArray, I should get name of the specific item clicked from object of array (items)

dreambold · Accepted Answer · 2022-12-13 17:49:41Z

1

Here's the working solution:

import React, { useState, useEffect } from "react";

const App = () => {
  const [items, setItems] = useState([
    { name: "Furniture", categoryKey: 1 },
    { name: "Shoes", categoryKey: 2 },
    { name: "Electronics", categoryKey: 3 },
    { name: "Clothes", categoryKey: 4 },
    { name: "Grocery", categoryKey: 5 }
  ]);
  const [myNewArray, setMyNewArray] = useState([
    { name: "demo-item", categoryKey: 100 }
  ]);

  useEffect(() => {
    console.log(myNewArray);
  }, [myNewArray]);

  const clickHandler = (item) => {
    setMyNewArray([...myNewArray, item]);
  };

  return (
    <div>
      {items.map((item) => (
        <button onClick={() => clickHandler(item)} key={item.categoryKey}>
          {item.categoryKey}-{item.name}
        </button>
      ))}
      <h4>New array after clicking on item from above array[items]</h4>
      {myNewArray.map((item, i) => (
        <button key={i}>
          {item.categoryKey}-{item.name}
        </button>
      ))}
    </div>
  );
};

export default App;

The live demo is here: https://codesandbox.io/s/determined-solomon-phyy9u?file=/src/App.js:0-1163

You can have a look at the console to check the myNewArray updates.

edited Dec 13, 2022 at 17:49

answered Dec 13, 2022 at 17:16

dreambold

3,1001 gold badge16 silver badges33 bronze badges

3 Comments

MeAtWork Over a year ago

Instead of myNewArray, I should get name of the specific item clicked from object of array (items)

DSDmark Over a year ago

What do you means by Instead of myNewArray, I should get the name of the specific item clicked from object of array (items)? Then you need to return item.name;

dreambold Over a year ago

Please have a look at the updated sandbox @TruptiGaonkar

DSDmark · Accepted Answer · 2022-12-13 17:24:05Z

0

You could also do like this.

if Item is with the matching category Key. Then, it's Update the myNewArray state with the new item

const clickHandler = (categoryKey: any) => {
    
const item = items.find((i) => i.categoryKey === categoryKey);
    
setMyNewArray([...myNewArray, item]);
  };

Here is Codesandbox

edited Dec 13, 2022 at 17:24

answered Dec 13, 2022 at 17:17

DSDmark

1,2975 gold badges15 silver badges27 bronze badges

2 Comments

dreambold Over a year ago

just passing item to clickHandler and setMyNewArray([...myNewArray, item]); should work.

MeAtWork Over a year ago

Thanks. That's nice. Can we store these objects in new array myNewArray as refreshing page removes newly added buttons. I guess it will require backend to do that

Collectives™ on Stack Overflow

Click and insert object in one array to another empty array using react hooks

3 Answers 3

1 Comment

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related