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 https://stackoverflow.com/a/12482991/10321531 — amirhe, Mar 17 '21 at 05:23

score 1 · Answer 1 · answered Mar 17 '21 at 05:24

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 '21 at 05:24

kyun

9,710
9
31
66

score 1 · Accepted Answer · answered Mar 17 '21 at 05:28

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

How to update value of JSON Object in ReactJS

2 Answers2