ReactJS Loop thru state array of object and add new field

Question

I am learning reactjs and got an array of json object. I want to loop thru each record in the array, read the id and add/set a new field with a string value. When the looping is done, I will set the state to save the state collection. So far no luck in getting this to work.

Any help is greatly appreciated.

const records = this.state.OriginalRecords
let record = {}
records.map(m => (function(m) {
    // get the record for each record to update
    record = this.state.OriginalRecords.find(record => record.id === m.id)
    // add and set the record new field
    record['newField'] = 'Test'
  }
))

this.setState({OriginalRecords: records, mappingDateDone: true})

My goal is every record in OrginalRecords has a new json field called newField = 'Test'.

Thanks

Mohammad Faisal · Accepted Answer · 2020-09-26 15:21:10Z

2

just do it like this using map function

const records = this.state.OriginalRecords

const newRecords = records.map(item =>  {
    return {...item , newField : 'Test'}
}); 

this.setState({OriginalRecords: newRecords, mappingDateDone: true})

answered Sep 26, 2020 at 15:21

Mohammad Faisal

2,3771 gold badge13 silver badges18 bronze badges

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

Comments

Adam · Accepted Answer · 2020-09-26 15:20:21Z

0

const records = this.state.OriginalRecords

const mappedRecords = records.map(m => (function(m) {
    const item = this.state.OriginalRecords.find(record => record.id === m.id)
    // add and set the record new field
    item['newField'] = 'Test'
  }
))

this.setState({OriginalRecords: mappedRecords, mappingDateDone: true})

answered Sep 26, 2020 at 15:20

Adam

3,5384 gold badges35 silver badges54 bronze badges

Collectives™ on Stack Overflow

ReactJS Loop thru state array of object and add new field

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