score:1

Accepted answer
const data = [
  {
    key: 1,
    value: "four"
  },
  {
    key: 2,
    value: "fours"
  }
];

export default function App() {
  const [items, setItems] = React.useState(
    data.map((item) => {
      return { ...item, selected: false };
    })
  );
  const [work, setWork] = React.useState([]);

  const handleSelect = (value) => {
    const nextItems = items.map((item) => {
      if (item.value === value) {
        return {
          ...item,
          selected: !item.selected
        };
      }
      return item;
    });
    const nextWork = nextItems
      .filter((item) => item.selected)
      .map((item) => item.value);

    setWork(nextWork);
    setItems(nextItems);
  };
  return (
    <div className="App">
      {items.map((da) => (
        <div key={da.key} onClick={() => handleSelect(da.value)}>
          {da.value}
        </div>
      ))}
      <p>Items: {JSON.stringify(items)}</p>
      <p>Selected: {JSON.stringify(work)}</p>
    </div>
  );
}

score:-1

const data = [
  {
    Key: 1,
    value: "four"
  },
  {
    Key: 2,
    value: "fours"
  },
]

function App() {
  const [work , setWork] = React.useState()
  // *e* stands for event here, e.target is an clicked element itself. Now you can use it to pick up the element by and its properties: 
  const handleSelect = e => {
    console.log(e.target.dataset.key) 
    // dataset.key is available thanks to data-key attribute of the element
    // this way you can get any of needed data from element and then use it to set new work state
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {
        data.map((da , idx) => (
          <div onClick = {handleSelect} data-key={da.Key} >{da.value}</div>
        ))
      }
      
    </div>
  );
}

Related Query

More Query from same tag