web2019/static/js/shop/FakePlaceholder.jsx

import React from 'react';

/**
 * Component that displays a placeholder inside crate.
 * Allows to display how it remains space for the current crate.
 */
export function FakePlaceholder({isDraggingOver, nToDraw}) {
    const fakePlaceholder = [];

    for (let i = nToDraw; i > 0; i--) {
        fakePlaceholder.push(
            <div key={i} style={{
                display: isDraggingOver ? 'none' : 'block',
                border: '1px dashed #ccc',
                width: '45px',
                marginBottom: '5px',
            }}></div>
        );
    }

    return (
        <React.Fragment>
            {fakePlaceholder}
        </React.Fragment>
    );

}