Foundation Joyride : Invalid variation error

Question

I created one button manually like below in foundation joy ride, in-order to disable the foundation joy ride completely.

neverShowJoyRide: function(){
  $(document).foundation('joyride', 'hide'); //hide the joy ride on trigger
},
render: function () {
  var self = this;
  return (
    <ol className="joyride-list" data-joyride>
      <li data-id="startJoyRide" data-text="Next" data-options="prev_button: false; tip_location: left">
       <p>Welcome to XXXX - Would you like to take a guided tour of the site ?</p>
       <button className="small button" onClick={this.neverShowJoyRide}>Never show this Again</button>
      </li> 
    </ol>
  );
}

I am using this code in react. When i render this code in my react component, it is not showing any error. But when i click on the button "never show this again" then i am getting an error message like:

invariant.js:42 Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same data-reactid: .0.0.5.0.2.0.0.1

Does any one have any idea about this? please help me. Thanks in advance.