Skip to content

Instantly share code, notes, and snippets.

@ovpv

ovpv/accordion.js Secret

Created Mar 23, 2019
Embed
What would you like to do?
accordion structure
class Accordion extends React.Component {
constructor(props) {
super(props)
this.state = {
tabs: [
{
id: 1,
title: "tab 1",
content: "this is tab 1",
active: true
},
{
id: 2,
title: "tab 2",
content: "this is tab 2",
active: false
},
{
id: 3,
title: "tab 3",
content: "this is tab 3",
active:false
}
]
}
}
render() {
const tabsArray = this.state.tabs;
return (
<div>
<h2>Accordion:</h2>
<div id="accordion">
{
tabsArray.map((tab,index)=>{
return <Tab key={index} id={tab.id} title={tab.title} content={tab.content} active={tab.active} />
})
}
</div>
</div>
)
}
}
ReactDOM.render(<Accordion />, document.querySelector("#app"))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment