gistfile1.jsx

class Options extends React.Component {
  constructor(props) {
    super(props);
  }

  updateAlternative(e, key) {
    this.props.questions[key].text = e.target.value;
  }

  dragulaDecorator(componentBackingInstance) {
    if (componentBackingInstance) {
      let dragEl = reactDragula([componentBackingInstance]);

      dragEl.on('drop', (el, target, source, sibling) => {
        console.log('source', source);
        this.reorderItems(source);
      });
    }
  }

  reorderItems(source) {
    console.log('reorder');
  }

  render() {
    return(
      <div className="container" ref={(e) => this.dragulaDecorator(e)}>
        {this.props.questions.map((question, key) => 
          <div key={question.id} className="option">
            <hr />
            <div className="form-group row">
              <label className="col-sm-3 col-form-label">Opção</label>
              <div className="col-sm-9">
                <input type="text" name="question[]" className="form-control" defaultValue={question.text} onChange={(e) => this.updateAlternative(e, key)} />
                <input type="hidden" name="question_order[]" defaultValue={question.order} />
              </div>
            </div>
            <GoToChatbotMessage question={question} messages={this.props.messages} />
          </div>
        )}
      </div>
    );
  }
}