CODEWITHSUNDEEP
javascriptreactjsdrag-and-dropreact-dnd
Z2Hero
Z2Hero

Reputation: 11

React.js Drag and Drop - infinite loops on Drop

I have a table with Drag and Drop method and everything works fine except Drop. So when I want to Drop item into the table's cell there's an error which is caused by infinite loop.

i would be grateful If somebody could explain the reason of this error. 

import React, {Component} from 'react';
import { DropTarget } from 'react-dnd';


function collect(connect, monitor) {
    return {
        connectDropTarget: connect.dropTarget,
        isOver: monitor.isOver,
        item: monitor.getItem,

    }
}

class DropCells extends Component {
    state = {
        tdValue: ""
    };
    render() {
        const { connectDropTarget, isOver, item} = this.props;
        const backgroundColor = isOver ? 'lightgreen' : 'white';
        const dropped = isOver?  this.setState({tdValue: this.props.item}): this.state.tdValue;
        return connectDropTarget(
            <td className="target" style={{ background: backgroundColor }}>
                 {dropped}
            </td>
        );
    }
}

export default DropTarget('item', {}, collect)(DropCells);

Upvotes: 1

Views: 928

Answers (1)

aclave1
aclave1

Reputation: 1711

You have a call to this.setState({tdValue: this.props.item}) inside of your render function. Every time your component re-renders, it will call this.setState which will trigger another render.

Upvotes: 1

Related Questions