Replace existing object in array with new value

Question

I have multiple dropdown menu, I am trying to update the value of an object if it exists in the array

my onChange is as follows

          onChange={e => {
            const answer = {
              id: questionChoice.id,
              name: questionChoice.text,
              value: e,
            }
            let newAnswer = {
              ...currentAnswer,
            }

            if (!currentAnswer.value) {
              newAnswer.value = [] // init empty array
            }

            if (index in newAnswer.value) {
              console.log('found')
              console.log('here', index in newAnswer.value)
              newAnswer.value = newAnswer.value.filter(item => item.value !== answer.value)
            }

            newAnswer.value = [...newAnswer.value, { [questionChoice.text]: answer.value }]
            console.log('new answer', newAnswer)

            updateCurrent(newAnswer)
          }}
          optionFilterProp="children"
          onFocus={onFocus}
          onBlur={onBlur}
          filterOption={(input, option) =>
            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
          }
        >
         

my current output is this

newAnswer.value: [
0: {Inform producers about the range of sustainability practices: "1"}
1: {Inform producers about environmental management: "7"}
2: {Provide mentoring services to new advisors: "12"}
3: {Inform producers about the range of sustainability practices: "2"}
]

expected output would be

newAnswer.value: [
0: {Inform producers about the range of sustainability practices: "2"}
1: {Inform producers about environmental management: "7"}
2: {Provide mentoring services to new advisors: "12"}
]

Right now it's appending any new result from newAnswer.value = [...newAnswer.value, { [questionChoice.text]: answer.value }]

However I am finding the correct object with

if (index in newAnswer.value) {
                  console.log('found')
                  // replace object here
                  newAnswer.value = newAnswer.value.filter(item => item.value !== answer.value)
               }

Just not sure how to change specific objects in place

Answer 1

You can use Array#find to find the object and update the property value after.

 const value = [{ 'Inform producers about the range of sustainability practices': "1" }, { 'Inform producers about environmental management': "7" }, { 'Provide mentoring services to new advisors': "12" }]; let questionChoice = 'Inform producers about the range of sustainability practices'; let newAnswer = '2'; let obj = value.find(o => o.hasOwnProperty(questionChoice)); if(obj;= null) obj[questionChoice] = newAnswer. console;log(value);

Answer 2

Figured it out,

changed

newAnswer.value = [...newAnswer.value, { [questionChoice.text]: answer.value }]

to newAnswer.value[index] = { [questionChoice.text]: answer.value }