How to automatically close an open details tag when another detail is clicked with React?

Question

The Problem

I have a list of detail tags and I would like to have an opened details tag close when another one opens.

I am dynamically rendering a list of details tags

Stack

I am using React and hooks

My attempts

I set the open attribute is set with useState and updated when a details tag is clicked, but this does not seem to work.

Here is a link to a code sandbox

import { useState } from "react";

const arr = [
  { name: "Jim", age: 22 },
  { name: "Sarah", age: 42 },
  { name: "Don", age: 7 }
];

export default function App() {
  const [open, setOpen] = useState(false);

  const toggleDetails = (index) => {
    setOpen(!open);
  };
  return (
    <ul>
      {arr?.map((thing, index) => (
        <details key={index} open={open} onClick={() => toggleDetails(index)}>
          <summary>{thing.name}</summary>
          {thing.age}
        </details>
      ))}
    </ul>
  );
}

Answer 1

I added an "id" key as presented in your codesandbox to do the following, use toggleDetails to set the id of the current opened detail and then in the open prop check if the current object id in the array matches this of the state.

If it does, open is true, else it is false.

import { useEffect, useState } from "react";

const arr = [
  { id: "03F03BBE", name: "Jim", age: 22 },
  { id: "D37DEF7F1E7E", name: "Julie", age: 42 },
  { id: "8D61", name: "Don", age: 7 }
];

export default function App() {
  const [openId, setOpenId] = useState('');

  const toggleDetails = (thingId) => {
    setOpenId(thingId);
  };

  return (
    <ul>
      {arr?.map((thing, index) => (
        <details key={index} open={openId === thing.id} onClick={() => toggleDetails(thing.id)}>
          <summary>{thing.name}</summary>
          {thing.age}
        </details>
      ))}
    </ul>
  );
}

Answer 2

This works for me:

import { useState } from "react";

const faqs = [
  { id: "03F03BBE", name: "Jim", age: 22 },
  { id: "D37DEF7F1E7E", name: "Julie", age: 42 },
  { id: "8D61", name: "Don", age: 7 },
];

export default function App() {
  const [openFaqId, setOpenFaqId] = useState("");

  const clickActiveFaq = (id) => (e) => {
    e.preventDefault();
    setOpenFaqId(id !== openFaqId ? id : "");
  };

  return (
    <div>
      {faqs?.map((faq) => (
        <details
          key={faq.id}
          open={openFaqId === faq.id}
          onClick={clickActiveFaq(faq.id)}
        >
          <summary>{faq.name}</summary>
          {faq.age}
        </details>
      ))}
    </div>
  );
}