how to push an deleted list from an array to an empty array in reactjs

Question

I have two sections side by side in a page, left section has an array list, what i want to do is, on click of li i want to delete it form left, and want to display on the right side. Iam not getting how to push it to right and delete from left.

displayLeftSide = () => {
  let  list = this.state.leftItems.map((lists, i) => {
    return <li onClick={()=> this.deleteLeftItem(lists.key)} key={i}>
      {lists}</li> ;
  });
  return list;
}

deleteLeftItem(index) {
  let arr = [...this.state.leftItems];
  let array = [...this.state.rightItems];
  array.push(index, 1);
  arr.splice(index, 1);
  this.setState({rightItems: array});
  this.setState({leftItems: arr});
  console.log(arr)
  console.log(array)
}

Answer 1

You call push method with wrong args and as a result you actually don't add item to the right side. Please try this code:

deleteLeftItem(index) {
  const item = this.state.leftItems[index]

  const leftItemsCopy = [...this.state.leftItems]
  const rightItemsCopy = [...this.state.rightItems]
  leftItemsCopy.splice(index, 1) // rmeoves item from left side
  rightItemsCopy.push(item)

  this.setState({
    leftItems: leftItemsCopy,
    rightItems: rightItemsCopy
  })

}

Besides, when calling deleteLeftItem method you should pass item index as argument:

return <li onClick={()=> this.deleteLeftItem(i)} key={i}>

There is also another issue. Generally it's a bad idea to use array indices as keys (anti-pattern). Each item should have some unique prop (e.g. id) and it should be used as key. More details here.

You can check official redux doc for more immutable update patterns

Answer 2

Error is updating removed array with deleted entries from left array. This is the working solution of this problem,

const {useState} = React;
function App() {
  const [arr, updateArr] = useState([
    "one",
    "two",
    "three",
    "four",
    "five"
  ]);
  const [removedArray, updateRemovedArray] = useState([]);
  function removeHandler(datum) {
    let arrClone = arr;
    var index = arrClone.indexOf(datum);

    if (index > -1) {
      arrClone.splice(index, 1);
    }
    updateArr([...arrClone]);
    let removedArrayClone = removedArray;
    removedArrayClone.push(datum);
    updateRemovedArray([...removedArrayClone]);
  }
  function addHandler(datum) {
    let removedArrayClone = removedArray;
    var index = removedArrayClone.indexOf(datum);

    if (index > -1) {
      removedArrayClone.splice(index, 1);
    }
    updateRemovedArray([...removedArrayClone]);
    let arrClone = arr;
    arrClone.push(datum);
    updateArr([...arrClone]);
  }
  return (
    <div className="app">
      <div className="left-section">
        <center>
          <h3>Original Array</h3>
          {arr.length > 0 ? (
            <ul>
              {arr.map((datum, index) => (
                <li
                  className="tooltip"
                  key={index}
                  onClick={() => removeHandler(datum)}
                >
                  <b>{datum}</b>
                  <span className=" bgColorRemove tooltiptext">
                    Delete this item
                  </span>
                </li>
              ))}
            </ul>
          ) : (
            <h5>No data</h5>
          )}
        </center>
      </div>
      <div className="right-section">
        <center>
          <h3>Removed Entries</h3>
          {removedArray.length > 0 ? (
            <ul>
              {removedArray.map((datum, index) => (
                <li
                  key={index}
                  className="tooltip"
                  onClick={() => addHandler(datum)}
                >
                  <b>{datum}</b>
                  <span className="bgColorAdd tooltiptext">Add this item</span>
                </li>
              ))}
            </ul>
          ) : (
            <h5>No data</h5>
          )}
        </center>
      </div>
    </div>
  );
}
ReactDOM.render(<App/>, document.getElementById('root'))

ul li {
  background-color: #000;
  color: #fff;
  border-radius: 10px;
  width: 100px;
  height: 50px;
  margin: 20px;
  list-style-type: none;
  text-align: center;
  cursor: pointer;
}
.left-section {
  border-right: 2px solid #000;
}
.right-section {
}
.app {
  display: flex;
  justify-content: space-evenly;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
.bgColorAdd {
  background-color: green;
}
.bgColorRemove {
  background-color: red;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root" />