How to make several buttons simultaneously active but with some conditions?

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

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