Simple React Component To Implement The Foundation Accordion Component missing from Foundation React

Accordion.js

import React from 'react';
class Accordion extends React.Component {
  render() {
    return (
      <ul className="accordion" data-accordion>{this.props.children}</ul>
    );
  }
}

export default Accordion;

AccordionNavigation.js

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;

example.js

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>
        );
    }
}