Javascript replace key value in object list with user input

Question

I have an object as below.

let data= {
  "" : { name: 'Tom', age: '21'},
  "26": { name: 'Harry', age: '22'}
}

The first entry in the list is created when a user clicks on add button to add a new entry. I take the key value for the first entry from the input field. So if the input value is 8 the new data should be like below.

let data= {
  "8" : { name: 'Tom', age: '21'},
  "26": { name: 'Harry', age: '22'}
}

How can I achieve that?

Its just that I am initializing it like that in my react state when a new field is added. So later when the user will put value in the field I want that value to replace there. — user10518298
– user10518298, Commented Jan 27, 2021 at 19:26
I would store the value in a different state property until you have the key, and only then add the pair to the object. — trincot
– trincot, Commented Jan 27, 2021 at 19:31

Ori Drori · Accepted Answer · 2021-01-27 20:36:59Z

1

You can generate the new state using destructuring, and then setting the new state:

const updateTempKey = ({ '': temp, ...data }, input) => ({
  ...data,
  [input]: temp
})

const state = {
  "" : { name: 'Tom', age: '21'},
  "26": { name: 'Harry', age: '22'}
}

const newState = updateTempKey(state, '8') 

console.log(newState)

Whenever the input is set, you can also set the state of the data:

setData(state => updateTempKey(state, input))

answered Jan 27, 2021 at 20:36

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rafael Dourado D · Accepted Answer · 2021-01-27 19:30:02Z

0

You can set data['some_key'] to be equals data[''], than delete data[''] like below (according to your example):

data['8'] = data['']
delete data['']

answered Jan 27, 2021 at 19:30

Rafael Dourado D

4783 silver badges7 bronze badges

Collectives™ on Stack Overflow

Javascript replace key value in object list with user input

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related