Buggy movement of Object in Array with Redux and React

Basically I'm trying to move a single object within an Array of object, but when I move the same object once or twice it starts moving the other object in said array.

So I have tried making a new Array with .slice() then .shift(item) by it's index and then add it back in at the right index with .splice(newIndex, 0, item), once the array has been update I push it to the Redux store which updates my Megadraft(ie Draft.js) application.

I have also tried directly manipulating the original array, ie this.props.array (like your meant too with Redux) and using the keys inside of the objects instead of the indexes.

import React from 'react';
import { MegadraftPlugin, DraftJS, CommonBlock } from "megadraft"

export default class ImageGalleryBlock extends React.Component {

_moveImgOneBack = (e, images, index) =>{
 e.preventDefault()

 let newPlace = index - 1
 if(newPlace == -1){
  newPlace = images.length
 }

 const image = images.shift(index)
 images.splice(newPlace, 0, image)

 return this.props.container.updateData({ images: images })
}

_moveImgOneForward = (e, images, index) =>{
 e.preventDefault()

 let newPlace = index +1
 if(newPlace > images.length){
  newPlace = 0
 }

 const image = images.shift(index)
 images.splice(newPlace, 0, image)

 return this.props.container.updateData({ images: images })
}

render(){
 return (
  <CommonBlock {...this.props} actions={this.actions} title="Image 
   Gallery">
    <BlockContent>
      <div className='gallery-cms-block'>
        { this.props.images.map((obj, index)=> {
  return(
    <div key={obj.key} className="image-box">
      <button title="Move image back one" className="move-button"  
       onClick={(e)=> this._moveImgOneBack(e, 
       this.props.data.images, index)}>◀ {index}</button>
      <img className="image" src={`${obj.image.uri}? 
       id=${obj.image.id}`} />
      <div>
        <button key={obj.key} title="Move image forward one"
         className="move-button" onClick={(e)=> 
         this._moveImgOneForward(e, this.props.data.images, 
         index)}>▶</button>
      </div>
    </div>
     )
    }) }
      </div>
    </BlockContent>
   </CommonBlockMKII>
  );
 }
}

I expect the the button(ether forward or backward) to move said item and only the said item.

The results are that it will move the item once... maybe twice then get suck moving all the other items in the array.

Solution

... your using shift wrong:

array = ['foo', 'bar', 'not', 'feeling', 'welcome', 'by jack', 'ass users']
array.shift(whatEverIndex)

the output will always be the first index, i.e 'foo', and because your index is correct and your using

array.splice(newIndex, 0, item)

properly your array is changing in a strange fashion.

Try copying the desired item then delete it with .splice(), like this:

const item = array[index] //copy item
array.splice(index, 1) //remove old item
array.splice(newIndex, 0, item) //place item

funny that none of you guys NaN, laruiss, Antoine Grandchamp, J-Alex took the time to actually do what you should on stackoverflow... you know help someone out. damn vete a cascarla, Good luck Reece hope this solved it for you.