Skip to content

Instantly share code, notes, and snippets.

@cwhittl
Created April 19, 2017 12:51
Show Gist options
  • Save cwhittl/c2a0a92705a301e54f4a9aa3eba54bba to your computer and use it in GitHub Desktop.
Save cwhittl/c2a0a92705a301e54f4a9aa3eba54bba to your computer and use it in GitHub Desktop.
Simple React Component To Implement The Foundation Accordion Component missing from Foundation React
import React from 'react';
class Accordion extends React.Component {
render() {
return (
<ul className="accordion" data-accordion>{this.props.children}</ul>
);
}
}
export default Accordion;
import React from 'react';
class AccordionNavigation extends React.Component {
constructor(props) {
super(props);
this.state = this.isOpen(props.open);
}
isOpen(open){
if (open === true) {
return {open: true, class: "content active"};
} else {
return {open: false, class: "content"};
}
}
handleClick(e) {
e.preventDefault();
this.setState(this.isOpen(!this.state.open));
}
render() {
return (
<li className="accordion-navigation">
<a href="#" onClick={this.handleClick.bind(this)} className="accordion-title">{this.props.title}</a>
<div className={this.state.class}>
{this.props.children}
</div>
</li>
);
}
}
AccordionNavigation.defaultProps = {
open:false
}
export default AccordionNavigation;
import React from 'react';
import Accordion from './Accordion';
import AccordionNavigation from './AccordionNavigation';
class AccordionExample extends React.Component {
render() {
myArray = [1,2,3,4];
myArray.map(function (element) {
return (
<AccordionNavigation open={()=>element==1} title={element} key={element}>
{element}
</AccordionNavigation>);
});
return (
<div>
<Accordion>
{items}
</Accordion>
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment