Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Move object inside an array to another another array in react and remove the object from the initial array

I have two objects in my react component as follows

cosnt [Selected, setSelected] = React.useState([]);
cosnt [NonSelected, setNonSelected] = React.useState([]);

const Tmp_Selected = [
   { "Metric": "AAA", "Weight": 10, "Value": "xxx" },
   { "Metric": "BBB", "Weight": 20, "Value": "xx1" },
   { "Metric": "CCC", "Weight": 30, "Value": "xx2" },
];

const Tmp_NonSelected = [
   { "Metric": "DDD", "Weight": 5, "Value": "yy" },
   { "Metric": "EEE", "Weight": 15, "Value": "zz" },
   { "Metric": "FFF", "Weight": 25, "Value": "cc" },
];

React.useEffect(() => {
  setSelected(Tmp_Selected);
  setNonSelected(Tmp_NonSelected);
}, [location]);

I have a function in my code where I will be getting only the Metric and Weight values of NonSelected object value based on that, I need to move that whole object from NonSelected object to Selected object

const MoveValues = (Metric='DDD', Weight=5) => {
  
}

So I need an something similar to this

const Tmp_Selected = [
   { "Metric": "AAA", "Weight": 10, "Value": "xxx" },
   { "Metric": "BBB", "Weight": 20, "Value": "xx1" },
   { "Metric": "CCC", "Weight": 30, "Value": "xx2" },
   { "Metric": "DDD", "Weight": 5, "Value": "yy" },
];

const Tmp_NonSelected = [
   { "Metric": "EEE", "Weight": 15, "Value": "zz" },
   { "Metric": "FFF", "Weight": 25, "Value": "cc" },
];

Any help is much appreciated

Thanks,

Tags:

3

Answers


  1. 0 
    const MoveValues = (Metric = 'DDD', Weight = 5) => {
      const item_Selected = NonSelected.find(item => item.Metric === Metric && item.Weight === Weight)
      const Tmp_Selected = [...Selected, item_Selected]
      const Tmp_NonSelected = NonSelected.filter(item => item.Metric !== Metric && item.Weight !== Weight)

      console.log(Tmp_NonSelected)
      console.log(Tmp_Selected)
}
    Login or Signup to reply.
  2. 0

    You can use the filter method of Arrays to remove object from the nonSelected Array.

    1. Find the object to move
    2. remove object from nonSelected array using filter
    3. Add object into selected array using spread operator
    4. setState of both the objects
    const MoveValues = (Metric = 'DDD', Weight = 5) => {

    const objectToMove = NonSelected.find(object => object.Metric === Metric && object.Weight === Weight);
  
    if (objectToMove) {

      const arrayOfNonSelected = NonSelected.filter(obj => obj !== objectToMove);
  
      const arrayOfSelected = [...Selected, objectToMove];
  
      setNonSelected(arrayOfNonSelected);
      setSelected(updatedSelected);
    }

  }
    Login or Signup to reply.
  3. 0

    Here is full code of your Component:

        import React, { useEffect } from 'react'

function StackTest() {
    const [Selected, setSelected] = React.useState([]);
    const [NonSelected, setNonSelected] = React.useState([]);

    const Tmp_Selected = [
        { "Metric": "AAA", "Weight": 10, "Value": "xxx" },
        { "Metric": "BBB", "Weight": 20, "Value": "xx1" },
        { "Metric": "CCC", "Weight": 30, "Value": "xx2" },
    ];
    const Tmp_NonSelected = [
        { "Metric": "DDD", "Weight": 5, "Value": "yy" },
        { "Metric": "EEE", "Weight": 15, "Value": "zz" },
        { "Metric": "FFF", "Weight": 25, "Value": "cc" },
    ];
    useEffect(() => {
        setSelected(Tmp_Selected);
        setNonSelected(Tmp_NonSelected);
    }, []);

    const MoveValues = (Metric = '', Weight = 0) => {
        const objectToMove = NonSelected.find(object => object.Metric === Metric && object.Weight === Weight);
        // console.log(NonSelected.find(object => object.Metric === Metric && object.Weight === Weight),"objectToMove");
        if (objectToMove) {
            const arrNonSelected = NonSelected.filter(obj => obj !== objectToMove);
            const arrSelected = [...Selected, objectToMove];
            setNonSelected(arrNonSelected);
            setSelected(arrSelected);
        }
    }
    const MoveBackValues = (Metric = '', Weight = 0) => {
        const objectToMove = Selected.find(object => object.Metric === Metric && object.Weight === Weight);
        // console.log(Selected.find(object => object.Metric === Metric && object.Weight === Weight),"objectToMove");
        if (objectToMove) {
            const arrSelected = Selected.filter(obj => obj !== objectToMove);
            const arrNonSelected = [...NonSelected, objectToMove];
            setSelected(arrSelected);
            setNonSelected(arrNonSelected);
        }
    }

    return (
        <>
        <h1>Selected</h1>
        {Selected && Selected.map((item,index) => (
            <p key={index} onClick={(e) => {
                MoveBackValues(item.Metric, item.Weight)
            }
            }>
            {item.Metric} - {item.Value} - {item.Weight}
            <br/></p>
        ))}
        <h1>NonSelected</h1>
        {NonSelected && NonSelected.map((item,index) => (
            <p key={index} onClick={(e) => {
                MoveValues(item.Metric, item.Weight)
            }
            }>
            {item.Metric} - {item.Value} - {item.Weight}
            <br/></p>
        ))}
        </>
    )
}

export default StackTest
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search