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>
Advertisement
Answer
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: