challenge-vtex-io-Gustavo-R.../react/components/descriptions/Sections.tsx

54 lines
1.4 KiB
TypeScript
Raw Normal View History

import React, { useState } from 'react'
const Sections = () => {
const [activeSection, setActiveSection] = useState("descrição1");
const handleClick = (section:string) => {
setActiveSection(section);
}
console.log(activeSection)
return (
<div>
<ul>
<li>
<button onClick={() => handleClick("descrição1")}
className={activeSection === "descrição1" ? "open" : "close"}
>
Descrição
</button>
</li>
<li>
<button onClick={() => handleClick("descrição2")}
className={activeSection === "descrição2" ? "open" : "close"}
>
Descrição
</button>
</li>
<li>
<button onClick={() => handleClick("descrição3")}
className={activeSection === "descrição3" ? "open" : "close"}
>
Descrição
</button>
</li>
<li>
<button onClick={() => handleClick("descrição4")}
className={activeSection === "descrição4" ? "open" : "close"}
>
Descrição
</button>
</li>
<li>
<button onClick={() => handleClick("descrição5")}
className={activeSection === "descrição5" ? "open" : "close"}
>
Descrição
</button>
</li>
</ul>
</div>
)
}
export default Sections