Setting a property of an object inside array of objects based on a match: React JS

Question

https://codesandbox.io/s/polished-bird-662mh

I am having this an array of objects and an object with the following structure

this.state = {
               arr : [ {
                        id: "val1",
                        initialVal: "test1",
                        finalVal: "final1"
                       },
                       {
                         id: "val2",
                         initialVal: "test2",
                         finalVal: "final2"
                       },
                       {
                         id: "val3",
                         initialVal: "test3",
                         finalVal: "final3"
                       },
                       {
                         id: "val4",
                         initialVal: "test3",
                         finalVal: "final3"
                       }
                     ],
                values: [ "test1","test3"]
              }

this.obj = { field: "test1" , val:6}

I am writing a function that takes this obj as its parameter and based on the "field" value it should set the state of "finalVal" with the "val" property of obj with the following computation(if val is greater than 5 add "ok" to the field else add "cancel") and the objects whose property don't match in the "values" array of the state its "finalVal" should be set to just blank

So the output should look after setting state :

 [ 
             {
              id: "val1",
              initialVal: "test1",
              finalVal: "ok"
             },
             {
              id: "val2",
              initialVal: "test2"
              finalVal: "final2"
             },
             {
              id: "val3",
              initialVal: "test3"
              finalVal: ""
             },
             {
              id: "val4",
              initialVal: "test4"
              finalVal: "final4"
             }
 ]


//What I have tried so far

 setObjState = obj => {
    console.log(obj);
    let arr = [...this.state.arr];
    let finalArr = arr.map(function(item) {
      if (item.initialVal === obj.field) {
        return { ...item, finalVal: obj.val > 5 ? "Cancel" : "Ok" };
      } else {
         if(this.state.values.includes(item.id){
              return { ...item, finalVal: "" };
          }
      }
    });
    console.log(finalArr);
    this.setState({ arr: finalArr });
  }

Shubham Verma · Accepted Answer · 2019-07-29 12:42:48Z

1

First thing you need map function to update new state.

You need to fix this only:

setObjState = obj => {
    console.log(obj);
    let arr = [...this.state.arr];
    let finalArr = arr.map(function(item) {
      if (item.initialVal === obj.field) {
        return { ...item, finalVal: obj.val > 5 ? "Cancel" : "Ok" };
      } else {
        return { ...item, finalVal: "" };
      }
    });

    console.log(finalArr);
    this.setState({ arr: finalArr });
  }

Here is full code and demo : https://codesandbox.io/s/nervous-hodgkin-uxhoi

edited Jul 29, 2019 at 12:42

answered Jul 29, 2019 at 12:26

Shubham Verma

5,0641 gold badge12 silver badges23 bronze badges

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

4 Comments

joy08 Over a year ago

Now I have to do a computation say if val is less than 5 need to add "ok" to fieldName else "cancel" incase it is greater to the matched object. Unmatched objects fielName should be set to blank

Shubham Verma Over a year ago

@vjr update your question what is exact requirement do you have??

joy08 Over a year ago

just did it:) Please check

Shubham Verma Over a year ago

@vjr updated code please check. You can check live version here : codesandbox.io/s/nervous-hodgkin-uxhoi

Vencovsky · Accepted Answer · 2019-07-29 12:50:31Z

1

You should map the array, returing an object and the value of the field you want have a condition to check decide the value;

let filteredArr = arr.map(x => ({...x, finalVal: (x.initialVal == obj.field ? (obj.val > 5 ? "Ok" : "Cancel" ) : "")}))
this.setState({arr: filteredArr})

let obj = { field: "test1" , val: 6}
let arr = [ {
                        id: "val1",
                        initialVal: "test1",
                        finalVal: "final1"
                       },
                       {
                         id: "val2",
                         initialVal: "test2",
                         finalVal: "final2"
                       },
                       {
                         id: "val3",
                         initialVal: "test3",
                         finalVal: "final3"
                       }
                     ]

let filteredArr = arr.map(x => ({...x, finalVal: (x.initialVal == obj.field ? (obj.val > 5 ? "Ok" : "Cancel" ) : "")}))

console.log(filteredArr)

edited Jul 29, 2019 at 12:50

answered Jul 29, 2019 at 12:19

Vencovsky

32.1k25 gold badges132 silver badges202 bronze badges

2 Comments

Vencovsky Over a year ago

@vjr please change your sample data. In arr, you don't have any numeric value. Also it's very confusing, obj.val is 6, but you say if val is greater than 5 add "ok" to the field else add "cancel". So this means greater or equal 6 ?

Vencovsky Over a year ago

@vjr just edit, not sure if it's correct, but where you are

Collectives™ on Stack Overflow

Setting a property of an object inside array of objects based on a match: React JS

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related