React text dropdown toggle (toggles all)-CodePudding

I am trying to make a small text dropdown. When you click on the heading text, the p tag will show. It is working, but.. it is toggling all of them, when I only click on of them. I have multiple "li" tags with text and the function. So I am not looping anything

const [isActive, setActive] = useState(false)

  const toggleText = () => {
    setActive(!isActive)
  } 


  <li>
              <h2 onClick={toggleText}>Lorem ipsum dolar sit amet</h2>

              {isActive && (
                <p>
                  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut
                  reprehenderit explicabo laudantium quas, minus recusandae
                  quibusdam dolorem dolorum possimus natus quod nam, et labore
                  iste eos? Ducimus optio dolor soluta!
                </p>
              )}
              <div onClick={toggleText} className='dropDown__plus'>
                {!isActive ? (
                  <img src={plusIcon} alt='Plus icon' />
                ) : (
                  <img src={minusIcon} alt='Minus Icon' />
                )}
              </div>
            </li>

CodePudding user response：

Based on your question and the comments, you are reusing the isActive state across multiple elements in the same component, which means that each element does not have its own isActive state: they all share the same state globally.

You can create a child component that handles the state exclusively, while allowing it to receive contents in the form of props, e.g. for the heading and content:

import { useState } from "react";

export default function MyComponent(props) {
  const [isActive, setActive] = useState(false);

  const toggleText = () => {
    setActive(!isActive);
  };

  return (
    <li>
      <h2 onClick={toggleText}>{props.heading}</h2>

      {isActive && props.content}
      <button type="button" onClick={toggleText} className="dropDown__plus">
        {!isActive ? <> </> : <>-</>}
      </button>
    </li>
  );
}

Then, in your original parent component it's just a matter of using <MyComponent> to handle all your <li> entries:

<ul>
  <MyComponent
    heading="Lorem ipsum dolor sit amet"
    content={<p>Some text here</p>}
  />
  <MyComponent
    heading="Foo bar"
    content={<p>More foo bar content</p>}
  />
  <MyComponent
    heading="Last header"
    content={<p>C'est la vie</p>}
  />
</ul>

You can see a proof-of-concept example here: