Trying to get Accordion component to work

What did you do?

I installed react-foundation using npm. Then in my component I imported the necessary react-foundation components. import { Accordion, AccordionItem, AccordionContent, AccordionTitle} from 'react-foundation'

Then I set up my component as shown below (there’s an axios get being called in componentDidMount to set the donors state).

<Accordion>
	{this.state.donors.map(function(donor, i) {
		return(
			<AccordionItem key={donor.title}>
				<AccordionTitle>{donor.title}</AccordionTitle>
				<AccordionContent>
					<div dangerouslySetInnerHTML={{__html: donor.markup}} />
				</AccordionContent>
			</AccordionItem>
		);
 	})}
</Accordion>

What did you expect to happen?

I expected the accordion to open and collapse when clicking the titles

What actually happened?

Nothing happens when you click the titles. The content is never shown.

What version of this module are you using?

Latest version

[kbrabrand]

Here is a rough usage example:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import autobind from 'react-autobind';

import {
  Accordion as BaseAccordion,
  AccordionItem,
  AccordionTitle,
  AccordionContent,
} from 'react-foundation';

import Text from './Text';

export default class Accordion extends Component {
  static propTypes = {
    panels: PropTypes.arrayOf(PropTypes.object).isRequired,
  }

  constructor(props) {
    super(props);
    autobind(this);
  }

  state = { openPanels: {} }

  togglePanel(id) {
    this.setState({
      openPanels: {
        ...this.state.openPanels,
        [id]: !this.state.openPanels[id],
      },
    });
  }

  render() {
    const { panels = [] } = this.props;
    const { openPanels } = this.state;

    return (
      <BaseAccordion>
        {panels.map((panel) => {
          const active = !!openPanels[panel.id];

          return (
            <AccordionItem key={panel.id} isActive={active}>
              <AccordionTitle
                onClick={() => this.togglePanel(panel.id)}
              >{panel.heading}</AccordionTitle>

              <AccordionContent isActive={active} style={{ display: active ? 'block' : 'none' }}>
                <Text text={panel.text} />
              </AccordionContent>
            </AccordionItem>
          );
        })}
      </BaseAccordion>
    );
  }
}

[crisu83]

@kbrabrand I agree with the original decision as there are far too many edge-cases to account for.