如何在某些条件下同时激活多个按钮？

Question

I have a problem. I want to make buttons section, where user can click buttons to filter some content. When user click on 'all' button, all other should be turn off (change its color to initial, not active) in this moment. Also, user can check multiple buttons. I can't get how to do this.

Example of JSON:

{
    title: 'All',
    id: 53,
  },
  {
    title: 'Im a parent',
    icon: <Parent />,
    id: 0,
  },
  {
    title: 'I live here',
    icon: <ILiveHere />,
    id: 2,
  },

example of code: https://codesandbox.io/s/sleepy-haze-35htx?file=/src/App.js

Its wrong, I know. I tried some solutions, but I guess I can't get how to do it correctly.

With this code I can do active multiple buttons, but I can't get how to make conditions like

if (item.title === 'all){ TURN_OFF_ANY_OTHER_BTNS }
I guess I should store checked buttons in temporary array to make these operations.

Will be really thankfull for help.

Answer 1

If I understand your problem, I think this is what you are looking for:

const roles = [
  {
    title: "All",
    id: 53
  },
  {
    title: "I live here",
    id: 0
  },
  {
    title: "I live here too",
    id: 2
  }
];
// button
const SocialRole = ({ item, selected, setSelected }) => {
  const isActive = selected === item.title || selected === 'All';

  return (
    <button
      style={isActive ? { color: "red" } : { color: "blue" }}
      onClick={() => setSelected(item.title)}
    >
      {item.icon}
      <h1>{item.title}</h1>
    </button>
  );
};

export default function App() {
  const [selected, setSelected] = useState(roles[0].title);
  return (
    <div>
      {roles.map((item, index) => (
        <SocialRole
          key={index}
          item={item}
          selected={selected}
          setSelected={setSelected}
        />
      ))}
    </div>
  );
}

The problem was you were setting a new state into each button, when you should just use the state from the App.

Answer 2

Is this something you would like?

const SocialRole = ({ item, selected, setSelected }) => {
  let style =
    [...selected].indexOf(item.id) !== -1
      ? { color: "red" }
      : { color: "blue" };
  return (
    <button
      style={style}
      onClick={() => {
        if (item.id === 53) {
          setSelected(null);
        } else {
          setSelected(item.id);
        }
      }}
    >
      {item.icon}
      <h1>{item.title}</h1>
    </button>
  );
};

export default function App() {
  // We keep array of selected item ids
  const [selected, setSelected] = useState([roles[0]]);
  const addOrRemove = (item) => {
    const exists = selected.includes(item);

    if (exists) {
      return selected.filter((c) => {
        return c !== item;
      });
    } else {
      return [...selected, item];
    }
  };
  return (
    <div>
      {roles.map((item, index) => (
        <SocialRole
          key={index}
          item={item}
          selected={selected}
          setSelected={(id) => {
            if (id === null) setSelected([]);
            else {
              setSelected(addOrRemove(id));
            }
          }}
        />
      ))}
    </div>
  );
}