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

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;

CodePudding user response：

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)}

CodePudding user response：

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:

CodePudding user response：

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