How to build a react button that stores the selection in an array

October 27, 2022

I am trying to create a list of buttons with values that are stored in a state and user is only allowed to use 1 item (I dont want to use radio input because I want to have more control over styling it).

import React from "react";
import { useEffect, useState } from "react";
import "./styles.css";
const items = [
  { id: 1, text: "Easy and Fast" },
  { id: 2, text: "Easy and Cheap" },
  { id: 3, text: "Cheap and Fast" }
];

const App = () => {
  const [task, setTask] = useState([]);

  const clickTask = (item) => {
    setTask([...task, item.id]);
    console.log(task);
    // how can I make sure only 1 item is added to task
    // and remove the other items
    // only one option is selectable all the time
  };

  const chosenTask = (item) => {
    if (task.find((v) => v.id === item.id)) {
      return true;
    }
    return false;
  };

  return (
    <div className="App">
      {items.map((item) => (
        <li key={item.id}>
          <label>
            <button
              type="button"
              className={chosenTask(item) ? "chosen" : ""}
              onClick={() => clickTask(item)}
              onChange={() => clickTask(item)}
            />
            <span>{item.text}</span>
          </label>
        </li>
      ))}
    </div>
  );
};

export default App;

https://codesandbox.io/s/react-fiddle-forked-cvhivt?file=/src/App.js

I am trying to only allow 1 item to be added to the state at all the time, but I dont know how to do this?

Example output is to have Easy and Fast in task state and is selected. If user click on Easy and Cheap, select that one and store in task state and remove Easy and Fast. Only 1 item can be in the task state.

>Solution :

import React from "react";
import { useEffect, useState } from "react";
import "./styles.css";
const items = [
  { id: 1, text: "Easy and Fast" },
  { id: 2, text: "Easy and Cheap" },
  { id: 3, text: "Cheap and Fast" }
];

const App = () => {
  const [task, setTask] = useState();

  const clickTask = (item) => {
    setTask(item);
    console.log(task);
    // how can I make sure only 1 item is added to task
    // and remove the other items
    // only one option is selectable all the time
  };


  return (
    <div className="App">
      {items.map((item) => (
        <li key={item.id}>
          <label>
            <button
              type="button"
              className={item.id === task?.id ? "chosen" : ""}
              onClick={() => clickTask(item)}
              onChange={() => clickTask(item)}
            />
            <span>{item.text}</span>
          </label>
        </li>
      ))}
    </div>
  );
};

export default App;

Is this what you wanted to do?