image drag and drop into the rectangle

Question

I wanted to show all the 5 images in the area around the rectangle and make them draggable using React-Draggable but the images aren't being shown even if I map through the state and try to pass the url down the Images component. where am I going wrong? how do I show the images around the canvas?

codesandbox

import React, { Component } from "react";
import Draggable from "react-draggable";
import axios from "axios";
import "./App.css";
import Images from "./Images";
export default class App extends Component {
  constructor(props) {
    super(props);
    this.toggleAspect = this.toggleAspect.bind(this);
    this.state = {
      activeDrags: 0,
      deltaPosition: {
        x: 0,
        y: 0
      },
      controlledPosition: {
        x: -400,
        y: 200
      },
      urlImages: null,
      toggleDefault: true
    };
  }

  async componentDidMount() {
    const res = await axios.get("https://picsum.photos/v2/list?limit=5");
    this.setState({ urlImages: res.data });
    this.state.urlImages.map(data =>
      console.log("urlImage\t" + data.download_url)
    );
  }

  toggleAspect() {
    const currentState = this.state.toggleDefault;
    this.setState({ toggleDefault: !currentState });
  }
  handleDrag = (e, ui) => {
    const { x, y } = this.state.deltaPosition;
    this.setState({
      deltaPosition: {
        x: x + ui.deltaX,
        y: y + ui.deltaY
      }
    });
  };

  onStart = () => {
    this.setState({ activeDrags: ++this.state.activeDrags });
  };

  onStop = () => {
    this.setState({ activeDrags: --this.state.activeDrags });
  };

  // For controlled component
  adjustXPos = e => {
    e.preventDefault();
    e.stopPropagation();
    const { x, y } = this.state.controlledPosition;
    this.setState({ controlledPosition: { x: x - 10, y } });
  };

  adjustYPos = e => {
    e.preventDefault();
    e.stopPropagation();
    const { controlledPosition } = this.state;
    const { x, y } = controlledPosition;
    this.setState({ controlledPosition: { x, y: y - 10 } });
  };

  onControlledDrag = (e, position) => {
    const { x, y } = position;
    this.setState({ controlledPosition: { x, y } });
  };

  onControlledDragStop = (e, position) => {
    this.onControlledDrag(e, position);
    this.onStop();
  };

  render() {
    const dragHandlers = { onStart: this.onStart, onStop: this.onStop };
    const { deltaPosition, controlledPosition } = this.state;
    return (
      <div>
        <h1>React Draggable</h1>
        <p>Active DragHandlers: {this.state.activeDrags}</p>
        <p>
          <a href="https://github.com/STRML/react-draggable/blob/master/example/example.js">
            Demo Source
          </a>
        </p>
        <button onClick={this.toggleAspect}>Toggle Aspect Ratio</button>
        <canvas
          className={` ${
            this.state.toggleDefault ? "canvasFrame" : "canvasFrame-2"
          }`}
        />
        <Draggable>
          {/* urlImages.map((data)=>  problem
            <Images
            url={data.download_url}
            />
          ) */}
          <div
            className="box"
            style={{ position: "absolute", bottom: "100px", right: "100px" }}
          >
            I already have an absolute position.
          </div>
        </Draggable>
      </div>
    );
  }
}

Answer 1

There were a few changes required tldr; here is the working link,

https://codesandbox.io/s/unruffled-bogdan-x98ff

Images was changed a bit, one thing react-draggable mentions in it's docs is that the components must accept a few passed down properties. link to docs

Example of the Images component now to illustrate.

import React from "react";

const Images = ({
  download_url,
  className,
  style,
  onMouseDown,
  onMouseUp,
  onTouchStart,
  onTouchEnd
}) => {
  return (
    <img
      onMouseDown={onMouseDown}
      onMouseUp={onMouseUp}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
      className={className}
      style={style}
      src={download_url}
      alt="photos"
      width="50px"
      height="50px"
    />
  );
};
export default Images;

I made it overly verbose instead of spreading so you could see the properties required.

In App.js I made these changes, first in the setting of the state here

  async componentDidMount() {
    const res = await axios.get("https://picsum.photos/v2/list?limit=5");
    const urlImages = [...res.data];
    this.setState({ urlImages });
  }

And the actual rendering of the images

    {urlImages.map(data => (
      <Draggable>
        <Images key={data.id} download_url={data.download_url} />
      </Draggable>
    ))}

That gets the images on the page and they are draggable, I've never used react-draggable personally so I'm sure there are some improvements that could be made to make them smoother, etc. However this hopefully points you in the right direction.