Setting state of an object property inside array of objects based on a computation after match : 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 });
  }

SiddAjmera · Accepted Answer · 2019-07-30 09:10:22Z

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.

answered Jul 30, 2019 at 9:10

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

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

Comments

Chris · Accepted Answer · 2019-07-30 09:10:35Z

1

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

answered Jul 30, 2019 at 9:10

Chris

6,6911 gold badge25 silver badges27 bronze badges

Comments

Cat_Enthusiast · Accepted Answer · 2019-07-30 09:34:22Z

1

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

edited Jul 30, 2019 at 9:34

answered Jul 30, 2019 at 9:15

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

Collectives™ on Stack Overflow

Setting state of an object property inside array of objects based on a computation after match : reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related