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
I am using React and hooks
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>
);
}
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>
);
}
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>
);
}