Dragula dragging not recognizing dropzones well

Question

I am making a drag-and-drop trello-esque board for practice, I am running into an issue when getting data to feed the names and number of cards to my columns. I have a react component that is calling

this.props.getData() 

within its

componentDidMount() 

function. The dragula does not function correctly, and every time I drag, I need to take a lot of hover time and flail the draggable card around a bit before it recognizes that spot as being an available dropzone. Why does this happen? I am using

https://codepen.io/anon/pen/KxYEdy

as an example and took all of the CSS from there, as well as most of the HTML, but it still happens.

Answer 1

I now know exactly why this is happening! After hours of searching, I found the answer. This data call within the same component, is, first-of-all, bad practice, and second, it is causing that drag to not be as fluid and friendly as you would like. Comment these lines out and you are done!

Just kidding.

The way to still get this data and still have your dragula be extra smooth is to employ a design ideology in React called Container vs. Presentational Components. I learned about this through this article: https://css-tricks.com/learning-react-container-components/

It pretty much says to seperate your components into parent componets that get the data and make sure its right, as well as handle events, and then have child components to basically be the "looks" of the data-driven components. This worked for me. Don't forget to put the

dragula([arrayOfDivs])

in the componentDidMount() of the container component.

So, as an example, here:

class DataContainer extends Component {
  constructor() {
    super();
    this.state = {
      data: null
    }
  }

  componentDidMount() {
    getData().then(data => this.setState({ data: data }));
  }

  render() {
    if(dataIsRight(this.state.data)) {
      return <PresentationalComponent data={data} />;
    }
}

and the presentational component would be really simple

class PresentationComponent extends Component {
  render() {
    <div> {this.props.data} </div>
  }
}

If anyone else has had this issue and this helped, let me know!