Change the values in array based on some other value in React

Question

For example the original array is



const [leads,setLeads] = useState([
  { name:"something", otherValue:"something",stage:["Converted","Rejected","Refunded"]},
  { name:"something2", otherValue:"something2", stage:["Converted w/o demo","Rejected","Refunded"] },
  { name:"something3", otherValue:"something3",stage:["Rejected","Refunded"]}
])

Here is what should happen

Now if the stage includes Converted or Converted w/o demo a field should be added named converted with a value if true or if it does not includes either of both converted should be set to false

Basically the desired result should be

 [{ name:"something",  otherValue:"something",stage:["Converted","Rejected","Refunded"],converted :true},
  { name:"something2", otherValue:"something2", stage:["Converted w/o demo","Rejected"],converted: true},
  { name:"something3", otherValue:"something3",stage:["Rejected","Refunded"], converted:false}]

The value should be set using set using setLeads function

https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object You can refer to this. — Tushar Wasson, Apr 09 '21 at 11:57

score 1 · Answer 1 · answered Apr 09 '21 at 12:15

You can pass a callback function to useState where you add the additional property after processing the initial array and return the resultant array to be set into state for the first time.

For processing the array, you can use Array.prototype.map and Array.prototype.includes

Post this any update to the state will need to take care of this property update too

const arr = [
  { name:"something", otherValue:"something",stage:["Converted","Rejected","Refunded"},
  { name:"something2", otherValue:"something2", stage:["Converted w/o demo","Rejected","Refunded" },
  { name:"something3", otherValue:"something3",stage:["Rejected","Refunded"],
]
const getInitialState = () => {
  return arr.map(item => {
      if(item.stage.includes('Converted w/o demo') || item.stage.includes('Converted')) {
         return { ...item, converted: true}
      } else {
         return { ...item, converted: false}
      }

  })
}
const [leads, setLeads] = useState(getInitialState)

score 0 · Answer 2 · answered Apr 09 '21 at 12:22

const array = [
      {
        name: 'something',
        otherValue: 'something',
        stage: ['Converted', 'Rejected', 'Refunded'],
      },
      {
        name: 'something2',
        otherValue: 'something2',
        stage: ['Converted w/o demo', 'Rejected', 'Refunded'],
      },
      {
        name: 'something3',
        otherValue: 'something3',
        stage: ['Rejected', 'Refunded'],
      },
    ];

    array.map((data, index) => {
      if (data.stage.indexOf('Converted')) {
        array[index].converted = true;
      } else {
        array[index].converted = false;
      }
    });

    const [leads, setLeads] = useState(array);

// if Converted value exists in array then add converted=true otherwise converted=false . You can change the value accordingly above if statement if (data.stage.indexOf('Converted'))

// output
    [
        {
            "name": "something",
            "otherValue": "something",
            "stage": [
                "Converted",
                "Rejected",
                "Refunded"
            ],
            "converted": false
        },
        {
            "name": "something2",
            "otherValue": "something2",
            "stage": [
                "Converted w/o demo",
                "Rejected",
                "Refunded"
            ],
            "converted": true
        },
        {
            "name": "something3",
            "otherValue": "something3",
            "stage": [
                "Rejected",
                "Refunded"
            ],
            "converted": true
        }
    ]

Change the values in array based on some other value in React

2 Answers2