How to update value of JSON Object in ReactJS

Question

I'm having a JSON data like this

const dataArr = [{
        id: "8",
        data: { label: "node 4" },
        position: { x: 0, y: 0 },
        selectable: true,
      },
      {
        id: "e12",
        source: "1",
        target: "2b",
        type: "smoothstep",
        animated: false,
        style: { stroke: "", width: "" },
      },
      ....
      ]

How can I update value of stroke - style: { stroke: "", width: "" }, ?

I tried

let tempArr = [...dataArr];
tempArr.filter((x) => x.target == "someValue").forEach((x)=> {x.style.stroke = "#SomeData"})

But got error : Uncaught TypeError: "stroke" is read-only

I guess this will help you stackoverflow.com/a/12482991/10321531 — amirhe
– amirhe, Commented Mar 17, 2021 at 5:23

Nithish · Accepted Answer · 2021-03-17 05:28:59Z

2

You can use Array.map and updated the value only for those objects which are satisfying the condition else just return the same object.

const dataArr = [{id:"8",data:{label:"node 4"},position:{x:0,y:0},selectable:true},{id:"e12",source:"1",target:"2b",type:"smoothstep",animated:false,style:{stroke:"",width:""}}]

const updateStroke = (data, filterBy, updatedValue) => {
  return data.map(obj => {
    //Update only if the condition is matching
    if(obj.target === filterBy) {
      return {
        ...obj,
        style: {
          ...obj.style,
          stroke: updatedValue
        }
      }
    }
    //else return the object
    return { ...obj };
  })
}

console.log(updateStroke(dataArr, "2b", "black"));

.as-console-wrapper {
  max-height: 100% !important;
}

answered Mar 17, 2021 at 5:28

Nithish

6,1273 gold badges13 silver badges25 bronze badges

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

Comments

kyun · Accepted Answer · 2021-03-17 05:24:28Z

1

You can use map()

const tempArr = dataArr.map((data) => {
  if(data.target === "someValue"){
    return {
      ...data,
      style: {
        ...data.style,
        stroke: "#HASH_CODE",
      }
    }
  }
  return data;
});

answered Mar 17, 2021 at 5:24

kyun

10.4k9 gold badges36 silver badges79 bronze badges

Collectives™ on Stack Overflow

How to update value of JSON Object in ReactJS

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