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

stackoverflow.com/questions/54150783/… You can refer to this. — Tushar Wasson
– Tushar Wasson, Commented Apr 9, 2021 at 11:57

Shubham Khatri · Accepted Answer · 2021-04-09 12:15:04Z

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)

Swift · Accepted Answer · 2021-04-09 12:22:53Z

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
        }
    ]

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related