根据匹配后的计算，在对象数组内设置对象属性的状态：reactjs

Question

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

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: "test4",
                         finalVal: "final4"
                       }
                     ],
                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 => {
    let arr = [...this.state.arr];
    let finalArr = arr.map(function(item) {
      if (item.initialVal === obj.field) {
        return { ...item, finalVal: obj.val > 5 ? "Ok" : "Cancel" };
      } else {
         if(this.state.values.includes(item.id){
              return { ...item, finalVal: "" };
          }
      }
    });
    console.log(finalArr);
    this.setState({ arr: finalArr });
  }

Answer 1

You were missing an else condition:

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

---

Here's a Working CodeSandbox Sample for your ref.

Answer 2

You can simplify that function a lot with:

  setObjState = obj => {
    // create a new Array of items

    const arr = this.state.arr.map(item => {
      // determine the value
      const value = obj.val > 5 ? 'ok' : 'cancel';

      // set value or empty value
      const finalVal = item.initialVal === obj.field ? value : '';

      // return new object with finalVal
      return {
        ...item,
        finalVal,
      };
    });

    this.setState({ arr });
  };

https://codesandbox.io/s/gifted-frost-4olqb

Answer 3

You need a final else block in the event that none of the if-conditions pass, just so that you can return the item as-is:

I also think you're trying to check for item.initialVal since that actually has the test numbers.

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

See sandbox: https://codesandbox.io/s/falling-currying-no6ui