title: React DnD - "Cannot have two HTML5 backends at the same time."
body: <p>I am trying to make a POC with Rails5, action Cable, React and Rails and React DnD.</p>
  
  <p>The purpose is to make an app like trello but for an recruitment process.</p>
  
  <p>My front is in ReactJS.</p>
  
  <p>I have 3 components, first, the container call "Candidates", this component call 2 "CardBoard" components that call "Card" component.</p>
  
  <p>I user react DnD library for draggable card and droppable CardBoard. when i drop card on cardboard, i use a post call and a websocket(action cable from rails5) for update my state. I don't understand why i have this message after the post call :</p>
  
  <pre><code>Uncaught Error: Cannot have two HTML5 backends at the same time.
      at HTML5Backend.setup (eval at &lt;anonymous&gt; (webpack-bundle.self-7b1a342….js?body=1:4175), &lt;anonymous&gt;:87:15)
      at DragDropManager.handleRefCountChange (eval at &lt;anonymous&gt; (webpack-bundle.self-7b1a342….js?body=1:3566), &lt;anonymous&gt;:52:22)
      at Object.dispatch (eval at &lt;anonymous&gt; (webpack-bundle.self-7b1a342….js?body=1:4931), &lt;anonymous&gt;:186:19)
      at HandlerRegistry.addSource (eval at &lt;anonymous&gt; (webpack-bundle.self-7b1a342….js?body=1:3594), &lt;anonymous&gt;:104:18)
      at registerSource (eval at &lt;anonymous&gt; (webpack-bundle.self-7b1a342….js?body=1:4294), &lt;anonymous&gt;:9:27)
      at DragDropContainer.receiveType (eval at &lt;anonymous&gt; (webpack-bundle.self-7b1a342….js?body=1:1793), &lt;anonymous&gt;:146:32)
      at DragDropContainer.receiveProps (eval at &lt;anonymous&gt; (webpack-bundle.self-7b1a342….js?body=1:1793), &lt;anonymous&gt;:135:14)
      at new DragDropContainer (eval at &lt;anonymous&gt; (webpack-bundle.self-7b1a342….js?body=1:1793), &lt;anonymous&gt;:102:13)
      at eval (eval at &lt;anonymous&gt; (webpack-bundle.self-7b1a342….js?body=1:4399), &lt;anonymous&gt;:295:18)
      at measureLifeCyclePerf (eval at &lt;anonymous&gt; (webpack-bundle.self-7b1a342….js?body=1:4399), &lt;anonymous&gt;:75:12)
  </code></pre>
  
  <p>Candidate.jsx =</p>
  
  <pre><code>import React, { PropTypes } from 'react';
  import { DragDropContextProvider } from 'react-dnd';
  import HTML5Backend from 'react-dnd-html5-backend';
  import CardBoard from './CardBoard.jsx';
  
  export default class Candidates extends React.Component {
  
    constructor(props, _railsContext) {
      super(props);
  
      this.state = {
        candidates: this.props.candidates
      }
  
      this.filterByStatus = this.filterByStatus.bind(this)
    }
  
    componentDidMount() {
      this.setupSubscription();
    }
  
    setupSubscription() {
      App.candidate = App.cable.subscriptions.create("CandidateChannel", {
        connected: () =&gt; {
          console.log("User connected !")
        },
  
        received: (data) =&gt; {
          this.setState({ candidates: data.candidates })
        },
      });
     }
  
    render() {
      return (
        &lt;DragDropContextProvider backend={HTML5Backend}&gt;
          &lt;div className="recruitment"&gt;
            {
              ["À Rencontrer", "Entretien"].map((status, index) =&gt; {
                return (
                  &lt;CardBoard candidates={(this.filterByStatus({status}))} status={status} key={index} /&gt;
                );
              })
            }
          &lt;/div&gt;
        &lt;/DragDropContextProvider&gt;
      );
    } 
  }
  </code></pre>
  
  <p>CardBoard.jsx =</p>
  
  <pre><code>import React, { PropTypes } from 'react';
  import Card from './Card.jsx';
  import { DropTarget } from 'react-dnd';
  import ItemTypes from './ItemTypes';
  
  const cardTarget = {
    drop(props: Props) {
      var status = ''
  
      if(props.status == "À Rencontrer") {
        status = 'to_book'
      } else {
        status = 'interview'
      }
  
      return { status: status };
    },
  };
  
  @DropTarget(ItemTypes.CARD, cardTarget, (connect, monitor) =&gt; ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop(),
  }))
  
  export default class CardBoard extends React.Component&lt;Props&gt; {
  
    constructor(props, _railsContext) {
      super(props);
    }
  
    render() {
      const { canDrop, isOver, connectDropTarget } = this.props;
      const isActive = canDrop &amp;&amp; isOver;
  
  
      return connectDropTarget(
        &lt;div className={`${this.props.status} ui cards`}&gt;
          &lt;h2&gt;{`${this.props.status} (${this.props.candidates.length})`}&lt;/h2&gt;
          {
            (this.props.candidates).map((candidate, index) =&gt; {
              return &lt;Card candidate={candidate} key={index} /&gt;
            })
          }
          { isActive?
            'Release to drop' : 'drag a card here'
          }
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Card.jsx=</p>
  
  <pre><code>import React, { PropTypes } from 'react';
  import { DragSource } from 'react-dnd';
  import ItemTypes from './ItemTypes';
  
  
  const cardSource = {
    beginDrag(props) {
      return {
        candidate_id: props.candidate.id,
      };
    },
  
    endDrag(props, monitor) {
      const item = monitor.getItem();
      const dropResult = monitor.getDropResult();
  
      if (dropResult) {
        console.log(`You dropped ${item.candidate_id} vers ${dropResult.status} !`);
        $.post(`/update_status/${item.candidate_id}/${dropResult.status}`);
      }
    },
  };
  
  @DragSource(ItemTypes.CARD, cardSource, (connect, monitor) =&gt; ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
  }))
  
  export default class Card extends React.Component {
  
    constructor(props, _railsContext) {
      super(props);
    }
  
    render() {
      const { isDragging, connectDragSource } = this.props;
      const { name } = this.props;
      const opacity = isDragging ? 0 : 1;
  
      var candidate = this.props.candidate;
  
      return (
        connectDragSource(
          &lt;div className="card" key={candidate.id} style={{opacity}}&gt;
            &lt;div className="content"&gt;
              &lt;div className="header"&gt;{`${candidate.first_name} ${candidate.last_name}`}&lt;/div&gt;
              &lt;div className="description"&gt;
                {candidate.job_title}
              &lt;/div&gt;
              &lt;span className="right floated"&gt;
                &lt;i className="heart outline like icon"&gt;&lt;/i&gt;
                {candidate.average_rate}
              &lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        )
      );
    }
  }
  </code></pre>
  
  <p>for better comprehension, here a gif of my feature and his bug :
  <a href="https://i.stack.imgur.com/ssEFk.gif" rel="noreferrer">feature with bug</a></p>
  
  <p><a href="https://github.com/antoineBernard/action-cable-react-poc" rel="noreferrer">here my github repo with all code</a></p>