import React, { useState, useEffect } from 'react'
import './block.css'

let blockList = [
  {
    id: 1,
    name: 'Test 1',
  },
  {
    id: 2,
    name: 'Test 2',
  },
  {
    id: 3,
    name: 'Test 3',
  },
  {
    id: 4,
    name: 'Test 4',
  },
  {
    id: 5,
    name: 'Test 5',
  }
]

function Example() {

  let getElemList = blockList.map((elem, index) => {
    return (
      <div className="block-elem" key={index}>
        { elem.name }
      </div>
    )
  })
  const [elemList, setElemList] = useState(getElemList);
  function handleDown(e) {
    e.preventDefault();
    //console.log('Down: ', e.nativeEvent);
    console.log(...elemList)


  }
  function handleUp(e) {
    e.preventDefault();
    //console.log('Up');
  }
  return (
    <div>
      <div className="block" onMouseDown={handleDown} onMouseUp={handleUp}>
        { elemList }
      </div>
    </div>
  )
}

export default Example