0
168
VisualizaçõesReact text dropdown toggle (toggles all)
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>
1 Respostas
Responde à pergunta0
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:
