CODEWITHSUNDEEP
javascriptreactjsecmascript-6draggable
sthig
sthig

Reputation: 469

React Dragula giving "Failed to compile" and "unexpected" error

I've been trying to implement React Dragula (link: https://github.com/bevacqua/react-dragula) and keep coming up with an error because I'm sure my syntax is incorrect. Can someone let me know what I'm doing wrong here?

All I'm trying to do is make the <div> below to become a sortable drag and drop list (this proves to be a lot harder than I'd hoped). React DND is an option however I've run into a fair amount of issues and this appears to be a little more simpler.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Icon} from 'react-fa';
import { Row, Col } from 'react-flexbox-grid';
import styled from 'styled-components';
import Dragula from 'react-dragula';

const style = {
  cursor: 'move',
};


const CountCell = styled.div`
  border: 1px solid #5C57B1;
  background: #6E68C5
  width: 320px;
  display: flex;
  justify-content: center;
  height: 50px;
  align-items: center;
`

const Score = styled.span`
  color: #74D8FF;
  font-size: 26px;
  font-weight: bold;
  padding: 0 0.5em;
  display: inline-block;
  width: 30px;
  text-align: center;
`
const ScoreName = styled.span`
  color: white;
  font-size: 20px;
  padding: 0 0.5em;
  display: inline-block;
  width: 160px;
  text-align: center;
`

const CountButton = styled.button`
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  background: #6E68C5;
  height: 30px;
  border: 0;
  border-radius: 50px;
  border: 3px solid white;
  width: 30px;
  transition: all 250ms;
  &:focus {outline:0;}
  &:hover {background: white;}
`

class Counter extends Component {

  incrementCount(e) {
    // I need to update the current state's count, and add 1 to it.
    this.setState({
      count: (this.state.count + 1),
    })
  }

  decrementCount(e) {
    this.setState({
      count: (this.state.count - 1),
    })
  }


  render() {
    const { count } = this.props
    const { decrementCount } = this.props
    const { incrementCount } = this.props
    const { nameof } = this.props
    const { text, isDragging, connectDragSource, connectDropTarget } = this.props;
    const opacity = isDragging ? 0 : 1;
    return (
      <div className='container' style={{ ...style, opacity }} ref={this.dragulaDecorator}>
          <CountCell>
            <Row style={{alignItems: 'center'}}>
              <Col>
                <CountButton
                  onClick={incrementCount}>
                  <Icon
                    name="icon" className="fa fa-plus score-icon"
                  />
                </CountButton>
              </Col>
              <Col >
                <ScoreName>{nameof}</ScoreName>
              </Col>
              <Col >
                <Score>{count}</Score>
              </Col>
              <Col>
                <CountButton
                  onClick={decrementCount}>
                  <Icon
                  name="icon" className="fa fa-minus score-icon"
                  />
                </CountButton>
              </Col>
            </Row>
          </CountCell>
        </div>
      )
    }
  }

Counter.propTypes = {
  // We are going to _require_ a prop called "count". It _has_ to be a Number.
  count: PropTypes.number.isRequired,

  // We are going to _require_ a prop called "incrementCount". It _has_ to be a Function.
  incrementCount: PropTypes.func.isRequired,

  // We are going to _require_ a prop called "decrementCount". It _has_ to be a Function.
  decrementCount: PropTypes.func.isRequired,

  nameof: PropTypes.string.isRequired,
},
componentDidMount: function () {
  var container = React.findDOMNode(this);
  dragula([container]);
}
});

export default Counter

The error I get is:

./src/components/pages/projectpages/dnd2/Counter.js
Syntax error: Unexpected token, expected ; (127:17)

  125 |   nameof: PropTypes.string.isRequired,
  126 | },
> 127 | componentDidMount: function () {
      |                  ^
  128 |   var container = React.findDOMNode(this);
  129 |   dragula([container]);
  130 | }

Upvotes: 0

Views: 306

Answers (1)

Andrii Starusiev
Andrii Starusiev

Reputation: 7764

Should your component be like this?

import Dragula from 'react-dragula';

class Counter extends Component {

    incrementCount(e) {
        // I need to update the current state's count, and add 1 to it.
        this.setState({
            count: (this.state.count + 1),
        })
    }

    decrementCount(e) {
        this.setState({
            count: (this.state.count - 1),
        })
    }
    render() {
        const { count } = this.props
        const { decrementCount } = this.props
        const { incrementCount } = this.props
        const { nameof } = this.props
        const { text, isDragging, connectDragSource, connectDropTarget } = this.props;
        const opacity = isDragging ? 0 : 1;
        return (
            <div className='container' style={{ ...style, opacity }} ref={this.dragulaDecorator}>
                <CountCell>
                    <Row style={{ alignItems: 'center' }}>
                        <Col>
                            <CountButton
                                onClick={incrementCount}>
                                <Icon
                                    name="icon" className="fa fa-plus score-icon"
                                />
                            </CountButton>
                        </Col>
                        <Col >
                            <ScoreName>{nameof}</ScoreName>
                        </Col>
                        <Col >
                            <Score>{count}</Score>
                        </Col>
                        <Col>
                            <CountButton
                                onClick={decrementCount}>
                                <Icon
                                    name="icon" className="fa fa-minus score-icon"
                                />
                            </CountButton>
                        </Col>
                    </Row>
                </CountCell>
            </div>
        )
    }
    dragulaDecorator = (componentBackingInstance) => {
        if (componentBackingInstance) {
            let options = {};
            Dragula([componentBackingInstance], options);
        }
    };
}

Counter.propTypes = {
  // We are going to _require_ a prop called "count". It _has_ to be a Number.
  count: PropTypes.number.isRequired,

  // We are going to _require_ a prop called "incrementCount". It _has_ to be a Function.
  incrementCount: PropTypes.func.isRequired,

  // We are going to _require_ a prop called "decrementCount". It _has_ to be a Function.
  decrementCount: PropTypes.func.isRequired,

  nameof: PropTypes.string.isRequired,
}

export default Counter;

https://codesandbox.io/s/N9k0K0Lpp

Upvotes: 1

Related Questions