Javascript – Hook does not toggle

There are three issues with your code.

1. Both buttons set the same state

The core issue is that those two buttons are in the same component, so they are setting the same state. If you want to two divs to open independently, you will either need to break those out into two separate components or have two separate calls to that hook.

Something like this should work: https://playcode.io/1730761

export function Component() {
  const [textOpened, openText] = useOpened();
  const [chapterOpened, openChapter] = useOpened();

  ...

  return (
    <>
      <button onClick={() => openText(item.text)}>{item.text}</button>
        {textOpened === item.text && (
        <div>Text stuff</div>
      )}
      <button onClick={() => openChapter(item.chapter)}>{item.chapter}</button>
        {chapterOpened === item.chapter && (
        <div>Chapter description</div>
      )}
    </>
  )
}

2. Your hook returns an Array instead of an object

The example above only solves part of your issue, though. You are getting a TS compiler because the array is of type string | SetStateAction<string>, due to the fact that it has a mix of strings and functions. If you instead return an object from your hook, this will fix that. You can try the code below out here: https://playcode.io/1730806

export function useOpened() {
  const [isOpened, setIsOpened] = React.useState("closed");
  const open = (depName: React.SetStateAction<string>) => setIsOpened(depName);
  return {isOpened, open}; // returning object instead of array
}

export function Component() {
  // decompose the object 
  const {isOpened: textOpened, open: openText} = useOpened();
  const {isOpened: chapterOpened, open: openChapter} = useOpened();

  ...
}

3. You need some way to change the state back to ‘closed’

As coded, you only ever set the value to the name of the shown componet. You can add simple check to the hook to see if the isOpen prop is already set to the name of the component, and if so, set it to close instead:

const open = (depName: React.SetStateAction<string>) => 
   setIsOpened(depName === isOpened ? "closed" : depName);

Putting it all to gether

The code below shows how you could pull this al together: https://playcode.io/1731497

export function useOpened() {
  const [isOpened, setIsOpened] = React.useState("closed");
  const open = (depName: React.SetStateAction<string>) => 
    setIsOpened(depName === isOpened ? "closed" : depName);
  return {isOpened, open};
}

export function Component() {
  const {isOpened: textOpened, open: openText} = useOpened();
  const {isOpened: chapterOpened, open: openChapter} = useOpened();

  const item = {
    text: "Text",
    chapter: "Chapter Text",
  }

  return (
    <>
      <button onClick={() => openText(item.text)}>{item.text}</button>
        {textOpened === item.text && (
        <div>Text stuff</div>
      )}
      <button onClick={() => openChapter(item.chapter)}>{item.chapter}</button>
        {chapterOpened === item.chapter && (
        <div>Chapter description</div>
      )}
    </>
  )
}

After thought

In the example below, swapped out the text prop for a boolean to toggle the open state. I also broke this up into two components. These two tweaks may end up being a little more clean and re-usable in the long run (generally breaking things up into smaller components helps in that regard), depending on your application: https://playcode.io/1731079

export function useOpened() {
  const [isOpened, setIsOpened] = React.useState(false); // now boolean
  const toggle = () => setIsOpened(!isOpened); // now toggles
  return { isOpened, toggle };
}

// broken-out component
export function Openable({buttonText, textToDisplay}) {
  const { isOpened, toggle } = useOpened();

  return (
    <>
      <button onClick={() => toggle()}>{buttonText}</button>
      {isOpened && (
        <div>{textToDisplay}</div>
      )}
    </>
  )
}

// simplified original component
export function Component() {
  const item = {
    text: "Text",
    chapter: "Chapter Text",
  }
  return (
    <>
      <Openable buttonText={item.text} textToDisplay="Text stuff" />
      <Openable buttonText={item.chapter} textToDisplay="Chapter description" />
    </>
  )
}