Does ReactJS not work with Zurb Foundation Accordions?

Question

I'm trying to use React to create ul components that are supposed to be accordions. I had it working before I was using React but when I use it, the foundation accordion is not working. The accordion content just stays hidden when I click on them.

var pairingLi = React.createClass({
  return (
        <ul className='accordion submissionHolder no-bullet' data-accordian="">
            {
                this.props.data.map(function (pairingData) {
                    var id = "pairing_" + pairingData.pairingID;
                    var contentId = "content_" + pairingData.pairingID;
                    console.log(parseFloat(pairingData.pairingRate) * 100);
                    var fill = parseInt(parseFloat(pairingData.pairingRate) * 100);
                    var link = '#' + contentId;
                    return (
                        <li key={pairingData.pairingID} id={id} className='questionGroup accordion-navigation'>
                            <a href={link}>
                                <div className="back percentFill" data-value={fill} data-question-type="2"></div>
                                <div className="front">
                                    <i className="fa fa-2x fa-angle-down pull-right"></i>

                                    <div>{pairingData.itemName} to {pairingData.secondaryItemName}</div>
                                    <div>Pairing Success Rate: {pairingData.formattedRate}</div>
                                </div>
                            </a>

                            <div id={contentId} className="content">
                                <div className="surveyItem row">
                                    <div className="small-6 columns surveyItemLabel">
                                        Number of prompts:
                                    </div>
                                    <div className="small-6 columns surveyItemValue">
                                        {pairingData.pairingPrompts}
                                    </div>
                                    <div className="small-6 columns surveyItemLabel">
                                        Number of times user said yes to pairing prompt:
                                    </div>
                                    <div className="small-6 columns surveyItemValue">
                                        {pairingData.promptsYes}
                                    </div>
                                    <div className="small-6 columns surveyItemLabel">
                                        Number of times user said no to pairing prompt:
                                    </div>
                                    <div className="small-6 columns surveyItemValue">
                                        {pairingData.promptsNo}
                                    </div>
                                    <div className="small-6 columns surveyItemLabel">
                                        Total revenue generated from pairing:
                                    </div>
                                    <div className="small-6 columns surveyItemValue">
                                        {pairingData.formattedUpsale}
                                    </div>
                                </div>
                            </div>

                        </li>
                    );
                })
                }
        </ul>
    );
});

I have lifecycle methods in there but everything is commented out.

Answer 1

Its hard to say exactly how to fix your problem without the rest of the component code, but I have wrapped a number of non-react internal tools that I use, using something close to the following:

    React.createClass
        displayName: "myPluginWrapper"

        componentDidMount: ->
            @$element = $( @getDomNode() )
            @renderPluginContent()

            @$element.plugin(@props.pluginOpts)

        renderPluginContent: (props) ->
          props = props or @props
          React.renderComponent(<div>{props.children}</div>, @$element[0])

        componentWillReceiveProps: (newProps)-> 
            #check for whatever options have changed or if u
            #are changing the elements that u are passing in here   

            if newProps.children isnt @props.children
              @renderPluginContent(newProps)

            if newProps.pluginOpts isnt @props.pluginOpts
              #if hte options have changed then do what u need to
              #to pass them back through
              @$element(newProps.pluginOpts)

        onClose: ->
          React.unmountComponentAtNode(@vex[0])

        render: ->
          <div />

USAGE

      <myPluginWrapper pluginOpts={pluginOpts}>
        #all of your accordion markup
        <ul className="accordion-class">
            <li></li>
            <li></li>
        </ul
      </myPluginWrapper>