forked from M3-Academy/challenge-vtex-io
54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
|
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
|