JSON.stringify() removing data from data model in React - reactjs

Question

I have two versions for the same logic. Below are the two codes:
/*Code 1*/
this.state.dataModel[0].route.routeLine = this.props.routeLine.join(' ');
/*Code 2*/
this.setState(prevState => {
const newDataModel = [...prevState.dataModel];
newDataModel[0].route.routeLine = this.props.routeLine.join(' ');
return {dataModel: newDataModel};
});
/* Common Code */
let finalData = { ...this.state.dataModel[0],
hasLocationChanged: this.state.isLocationEditedForConsSeg };
let data = JSON.stringify(finalData)
console.log('Stringify Data ',JSON.stringify(data))
When I use Code 1 the object is converted to JSON strings without data loss. But if I use Code 2 I am loosing data in JSON strings when using JSON.stringify().But according to my understanding of react Code 1 is not the correct way to mutate state
Below is the finalData in JSON object:
{
"layer": 1,
"layerName": "ConstructionSegment",
"layerId": 7384,
"agencyId": 79,
"lpModel": {
"lastProjectType": 2,
"lastProjectSurf": 2,
"gravelType": 0,
"gravelTreatment": 0,
"bitType": 1,
"concrType": 0,
"astType": 0,
"compType": 0,
"lastProjectYear": 2002,
"lpDepth": 7,
"totalDepth": 7,
"lastProjectMile": "0",
"comment": "",
"lastProjectYearEst": 0,
"lpDepthEst": 0,
"totalDepthEst": 0
},
"bModel": {
"topBaseType": 3,
"topBaseDpt": 23,
"topBaseYear": 1973,
"topBaseTrt": 6,
"bottomBaseType": 2,
"bottomBaseDpt": 23,
"bottomBaseYear": 0,
"bottomBaseTrt": 1,
"fabric": 0,
"subgradeStrength": 100,
"subgradeStrengthType": 5,
"lastSGImpYear": 0,
"subgradeTrt": 1,
"topBaseTypeEst": 0,
"topBaseDptEst": 0,
"topBaseYearEst": 0,
"bottomBaseTypeEst": 0,
"bottomBaseDptEst": 0,
"bottomBaseYearEst": 0,
"subgradeStrengthEst": 0,
"lastSGImpYearEst": 0
},
"xModel": {
"laneWidth": 4,
"numLanes": 2,
"rtShoulderTotal": 5,
"rtShoulderPaved": 0,
"gradingYear": 1973,
"curbs": 0,
"inslopeRatio": 0,
"paveSloughWidth": 0,
"sloughRatio": 0,
"edgelineTrt": 0,
"centerlineTrt": 0,
"medianType": 0,
"medianWidth": 0,
"rightOfWay": 100,
"sectionOwner": 2,
"gradingYearEst": 0
},
"maintenance": {
"blade": [],
"regravel": [],
"reshape": [],
"spotRep": [],
"dustControl": [],
"surfacing": [],
"crackSeal": [],
"patching": [],
"striping": [],
"cpr": [],
"crackSealConcrete": [],
"reApplyAst": []
},
"pavementcondition": {
"PlannedProjType": 0
},
"route": {
"id": 12804,
"start": "47.04905, -95.722035",
"end": "47.107359, -95.721154",
"routeLength": "4.03",
"routeArray": [
"47.04906,-95.72206",
"47.06001,-95.72184",
"47.06281,-95.72179",
"47.07266,-95.7216",
"47.07647,-95.72154",
"47.07991,-95.72149",
"47.08224,-95.72154",
"47.08528,-95.72169",
"47.08749,-95.72178",
"47.08846,-95.72179",
"47.09029,-95.72181",
"47.09236,-95.72178",
"47.09425,-95.72172",
"47.09729,-95.72154",
"47.10185,-95.721",
"47.10291,-95.72095",
"47.10738,-95.72119"
],
"routePointArray": [
[
47.04906,
-95.72206
],
[
47.06001,
-95.72184
],
[
47.06281,
-95.72179
],
[
47.07266,
-95.7216
],
[
47.07647,
-95.72154
],
[
47.07991,
-95.72149
],
[
47.08224,
-95.72154
],
[
47.08528,
-95.72169
],
[
47.08749,
-95.72178
],
[
47.08846,
-95.72179
],
[
47.09029,
-95.72181
],
[
47.09236,
-95.72178
],
[
47.09425,
-95.72172
],
[
47.09729,
-95.72154
],
[
47.10185,
-95.721
],
[
47.10291,
-95.72095
],
[
47.10738,
-95.72119
]
],
"startPoint": [
[
47.04905,
-95.72204
]
],
"endPoint": [
[
47.10736,
-95.72115
]
],
"waypoints": [],
"isPolyLine": false,
"hwyNum": "34",
"segDesc": "",
"routeLine": "47.04906,-95.72206 47.06001,-95.72184 47.06281,
-95.72179 47.07266,-95.7216 47.07647,
-95.72154 47.07991,-95.72149 47.08224,-95.72154 47.08528,
-95.72169 47.08749,-95.72178 47.08846,-95.72179 47.09029,
-95.72181 47.09236,-95.72178 47.09425,
-95.72172 47.09729,-95.72154 47.10185,-95.721 47.10291,
-95.72095 47.10738,-95.72119"
}
}
I can see the data routeLine in the console.log() statement if I use Code 1 but I cannot see the data routeLine in the console.log() if I use Code 2

Answer 1

You are losing it becasue setState is asynchronous. If you call this.setState and soon after you read this.state you'll notice that it's not immediately updated.
See this question for further details please and setState docs.
edit1: I created a sandbox example for you. Check code in App.js, you'll se 4 click functions and a logState function. click1 and click2 do what you did in your original post, click3 and click4 propose a solution to overcome the problem.

Answer 2

Your routeLine is a string: "47.04906,-95.72206 47.06001,-95.72184 47.06281", not an array as you might think. You need to first convert it to an array, and then apply a join():
this.state.dataModel[0].route.routeLine.split(' ').join(). You might need to revise your state and make sure you are parsing data according to your expectations.