2

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>
  );
}
Tyler Morales
  • 1,440
  • 2
  • 19
  • 56

2 Answers2

2

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={thing.id} open={openId === thing.id} onClick={() => toggleDetails(thing.id)}>
          <summary>{thing.name}</summary>
          {thing.age}
        </details>
      ))}
    </ul>
  );
}
Ben
  • 598
  • 3
  • 12
1

I added e.preventDefault() to close a details item when you click on it and 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>
  );
}
Carlos Junquera
  • 21
  • 2
  • You could improve your answer by having more of an explanation, take a squiz at Ben's answer and note how he explains what he did to solve the problem! There's an edit button under your answer where you can have a go at improving – Zach Jensz May 19 '22 at 01:20
  • 1
    `e.preventDefault()` is the key! – j3rry Jun 22 '23 at 00:05
  • `e.preventDefault()` has a side effect when a href link is inside of details. – codajoao Aug 17 '23 at 21:03