Best way to delete an item from Dictionary React js

Question

I have a dictionary named CarValues in my code which contains following data: CarValues is a dictionary initialized in the state.

dictionary: CarValues

key ==> string

Value ==> Array

key => Honda, Value => white, yellow, red, orange
key => Toyota, Value => white, yellow, green, black
Key => Volkswagen Value => 123, 456, 343

I would like to delete Honda and its value completely from CarValues. Though, I see few similar questions, I couldn't find the best solution for this question.

How can I remove an attribute from a Reactjs component's state object

As for deleting an object (dictionary) attribute, you can use `delete obj[attr]`. If your question is about changing a React component state, then you should add your state structure and explain more what the problem is. — kaveh, Mar 05 '18 at 05:00

simbathesailor · Accepted Answer · 2018-03-05T05:32:18.343

6

This should solve your issue

yourMethod(key) {
  const copyCarValues= {...this.state.CarValues}
   delete copyCarValues[key]
  this.setState({
     CarValues: copyCarValues,
  })
}

edited Mar 05 '18 at 05:32

answered Mar 05 '18 at 05:17

simbathesailor

3,681
2
19
30

shouldn't it be `delete copyCarValues[key]`instead of `delete CarValues[key]`? – izengod Mar 05 '18 at 05:31
I have one question: Wouldn't delete this.state.CarValues[this.state.key] solve it directly. Why do we have to create a copy and delete the item and then update the state. Sorry I am new to the front end and UI stuff. Pardon my question if it is lame. – Vicky Mar 05 '18 at 05:41
Reacts state is meant to be immutable meaning you never change the state, you replace the entire state if you want to make a change. @Vicky – Francis Malloch Mar 05 '18 at 06:03

Francis Malloch · Answer 2 · 2021-06-17T22:35:19.337

I believe in order to truly do this without mutating the state, you will need to re-create the entire state like so.

class Test extends React.Component {
  state = {
    thingToDelete: {},
    otherStuff: {}
  };

  deleteThingToDelete = () => {
    const {thingToDelete, ...state} = this.state;
    this.setState(state);
  }
}

Using the spread operator, we achieve a shallow clone, so be wary about that. The other option is to use Object.assign but that will also only offer a shallow clone but you will achieve much better browser support.

Rodrigo Garcia · Answer 3 · 2023-01-20T15:03:44.480

1

Probably arriving here a bit late, but here is a way of doing this with hooks and without actually mutating the previous state.

const sampleItems = {
  'key1': { id: 1, name: 'test'},
  'key2': { id: 2, name: 'test2'},
}

const Test = props => {
  const [items, setItems] = useState(sampleItems);

  deleteItemFromStateObject = itemKey => {
    setItems(({[itemKey]: toDelete, ...rest}) => rest);
  }
}

edited Jan 20 '23 at 15:03

answered Jul 27 '21 at 16:01

Rodrigo Garcia

61
3

score 0 · Answer 4 · answered Mar 05 '18 at 05:30

0

The easiest way to do this would be:

const carValues = Object.assign({}, this.state.carValues)
delete carValues[key]
this.setState({ carValues })

answered Mar 05 '18 at 05:30

Tyler

567
5
5

score 0 · Answer 5 · answered Mar 05 '18 at 06:07

0

You can use Underscore.js or Lodash http://underscorejs.org/#omit

_.omit(copyCarValues, 'Honda');

answered Mar 05 '18 at 06:07

David

15,894
22
55
66

Pratik Panchal · Answer 6 · 2019-09-12T13:14:14.360

First Initialise Array Globally

var dict = []

Add Object into Dictionary

dict.push(
     { key: "One",value: false},
     { key: "Two",value: false},
     { key: "Three",value: false});

Output : 
   [0: {key: "One", value: false},
    1: {key: "Two", value: false},
    2: {key: "Three", value: false}]

Update Object from Dictionary

Object.keys(dict).map((index) => {        
  if (index == 1){
    dict[index].value = true
  }
});

Output : 
   [0: {key: "One", value: false},
    1: {key: "Two", value: true},
    2: {key: "Three", value: false}]

Delete Object from Dictionary

Object.keys(dict).map((index) => {              
      if (index == 2){
        dict.splice(index)
      }
    });

Output : 
    [0: {key: "One", value: false},
     1: {key: "Two", value: true}]

score 0 · Answer 7 · answered May 08 '20 at 09:10

Here is another simple enough solution to achieve this.

const myCarsValueInState = this.state.myCarsValueInState;
    Object.keys(myCarsValueInState).map((index) => {
      myCarsValueInState[index] = undefined; // you can update on any condition if you like, this line will update all dictionary object values. 
      return myCarsValueInState;
    });

Simple enough.

Best way to delete an item from Dictionary React js

7 Answers7