Cześć!
Niestety znów poległem przy react'cie i chciałbym Was prosić o wytłumaczenie o co chodzi.
Mam plik Generator.js a w nim, między innymi, 2 metody:

renderModules(modulesPerPage, pageIndex){

    	var type = webStorage.getItem('type-id');

    	var modules = [];

    	var item = null;

    	const { products, dustbins } = this.state;

    	for (var j = 0; j < modulesPerPage; j++) {

			modules.push(
				<Dustbin
					accepts={
						[ItemTypes.GLASS]
					}
					lastDroppedItem={
						dustbins[(pageIndex) * type + j]
					}
					onDrop={
						item => this.handleDrop((pageIndex) * type + j, item)
					}
					key={
						(pageIndex) * type + j
					}
					id={
						(pageIndex) * type + j
					}
				/>,
			);

		}

		return modules;

	}


	handleDrop(index, item) {

		console.log(item);

		console.log(index);

		const {	name } = item;

		this.setState(update(this.state, {
			dustbins: {
				[index]: {
					$set: item,
				},
			},
			droppedBoxNames: name ? {
				$push: [name],
			} : {},
		}));
		
	}

Oraz plik Dustbin.js:

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

const style = {
    height: '12rem',
    width: '12rem',
    marginRight: '1.5rem',
    marginBottom: '1.5rem',
    color: 'white',
    padding: '1rem',
    textAlign: 'center',
    fontSize: '1rem',
    lineHeight: 'normal',
    float: 'left',
};

const dustbinTarget = {
    drop(props, monitor) {

        props.onDrop(props.id, monitor.getItem());

    },
};

class Dustbin extends Component {

    render() {
        const { accepts, isOver, canDrop, connectDropTarget, lastDroppedItem } = this.props;
        const isActive = isOver;

        let backgroundColor = '#222';

        if (isActive) {

            backgroundColor = 'darkgreen';

        } else if (canDrop) {

            backgroundColor = 'darkkhaki';

        }

        return connectDropTarget(
            <div style={{ ...style, backgroundColor }}>
            {isActive ?
                'Release to drop' :
                `This dustbin accepts: ${accepts.join(', ')}`
            }

            {lastDroppedItem &&
                <p>Last dropped: {JSON.stringify(lastDroppedItem)}</p>
            }
            </div>,
        );
    }
}

Dustbin.propTypes = {
    connectDropTarget: PropTypes.func.isRequired,
    isOver: PropTypes.bool.isRequired,
    canDrop: PropTypes.bool.isRequired,
    accepts: PropTypes.arrayOf(PropTypes.string).isRequired,
    lastDroppedItem: PropTypes.object,
    onDrop: PropTypes.func.isRequired,
};

export default DropTarget(props => props.accepts, dustbinTarget, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop(),
}))(Dustbin);

W Generator.js przekazuję do dustbin'u metodę handleDrop(). Oczekuję że zostanie do niej przekazany unikalny id (jak key czy id) oraz inny element. Niestety, za każdym razem pierwszym argumentem jest liczba o 1 większa niż powinna być (powinno być 9, zwraca mi 10) i za bardzo nie rozumiem czemu tak się dzieje. Próbowałem, w pliku dustbin.js w metodzie drop, przekazać mu jako pierwszy parametr id które mnie interesuje, niestety nie działa to tak jak bym chciał. W końcu domyśliłem się po co jest

item => this.handleDrop((pageIndex) * type + j, item)

więc, jako że wywołuję z 2 argumentami, zrobiłem tak

(index, item) => this.handleDrop((pageIndex) * type + j, item)

Niestety, index nadal wynosi o jeden więcej niż j. Za nic nie mogę dojść co tu się dzieje, w związku z tym bardzo bym prosił o wytłumaczenie.
Z góry dzięki wielkie :)