cannot read property of undefined | react error - arrays

I am trying to render info on UI, as IsMobileOnLease is a child node in JSON, i have used this to check the status of IsMobileOnLease but i am getting error as "cannot read property of undefined react".
this.mob.MobileLobList[0].MobileRiskList[0].IsMobileOnLease!=="undefined" && this.mob.MobileLobList[0].MobileRiskList[0].IsMobileOnLease=="Y"
?
<UISelect label="IsMobileOnLease" codeTableName="MobileData" model={this.mob} property="IsMobileOnLease" defaultValue='3' enabled={disabled} />
:
<UISelect label="IsMobileOnLease" codeTableName="MobileData" model={this.mob} property="IsMobileOnLease" defaultValue='5' enabled={disabled} />
}

Try this
this.mob.MobileLobList[0]?.MobileRiskList[0]?.IsMobileOnLease && this.mob.MobileLobList?.MobileRiskList?.IsMobileOnLease=="Y"

Related

how to do error handling in react js functional components

{ props.history.map((element,index)=>{
return( <>
<Historyy temp={element.main.temp} imgvalue3={imgvalue3} imageUrl={element.weather[0].icon} mintemperature={element.main.temp_min} maxtemperature={element.main.temp_max} weather={element.weather[0].description} wind={element.wind.speed} humidity={element.main.humidity} time={index + 1}/>
</>
)
}) }
//this is the code i want to do that whenever my map function get a null value or undefined value i can simply show a other message like data not found.
a possible sollution, ternary operator. if history is null or undefined show your the h1 tag else show the history component.
{props.history ? props.history.map((element,index)=>{
return(<>
<Historyy temp={element.main.temp} imgvalue3={imgvalue3} imageUrl={element.weather[0].icon} mintemperature={element.main.temp_min} maxtemperature={element.main.temp_max} weather={element.weather[0].description} wind={element.wind.speed} humidity={element.main.humidity} time={index + 1}/>
</> ) }) : <h1>an error has occured</h1> }

Cannot Change Property of Non-state Object Inside setState Function

I'm updating the 'backgroundColor' property of the all the objects nested within a sliderSegmentStyleDict state object using the following:
setSliderSegmentStyleDict(prevState => {
let updatedSegmentStyleDict = prevState
for(let segmentIndex in Object.keys(updatedSegmentStyleDict)) {
segmentIndex = Object.keys(updatedSegmentStyleDict)[segmentIndex]
let segmentDict = updatedSegmentStyleDict[segmentIndex]
segmentDict['backgroundColor'] = snappedSegmentIndex > segmentIndex ? '#19486A' : '#d1d5db'
updatedSegmentStyleDict[segmentIndex] = segmentDict
}
return updatedSegmentStyleDict
})
The first time the component renders, it works fine and sets the appropriate colour.
However, when I subsequently invoke this function manually, I get the following error in the console:
Uncaught TypeError: Cannot assign to read only property 'backgroundColor' of object '#<Object>'
Why am I unable to modify the backgroundColor property of segmentDict object?

Cannot read property 'lng' of undefined

I am using customer marker in google maps using ng-map.min.js
I am change the position of the custom marker, but it is showing the following error :
Uncaught TypeError: Cannot read property 'lng' of undefined
at a.setPosition (ng-map.min.js:25)
at a.draw (ng-map.min.js:25)
at a.Mz (overlay.js:1)
at js?key=xxx&callback=lazyLoadCallback:138
The code i write for custom marker is :
in html file :
==============
<custom-marker ng-repeat="p in page.watchpath track by $index" position="{{p.Location.position}}">
<div>
<img src="{{p.ImagePath ? page.serviceBasePath + p.ImagePath.substr(2) : page.serviceBasePath + 'Images/avatar.jpg'}}" style="border-radius: 50%; height:40px;width:40px;" />
</div>
</custom-marker>
in js file :
============
page.watchpath[deviceindex] = { position: device.Location.position, ImagePath: imagePath };
But When i am using for marker tag it is not showing any error :
<marker ng-repeat="p in page.watchpath track by $index" position="{{p.position}}"></marker>
When i am using for custom-marker tag it showing error message
How to rectify this error ?
Please help me ...?
What does the following function returns in your code?
device.Location.position
The model which you pass in your view (p.position) should be a one dimension array:
p.position = [0,0]
The first index is 'lat' the second is 'lng.

AngularJs error in return value from filter function

I would like to filter a Firebase path and see if a child exist in my path.
I just want to return the values wich have a path call "reponses". It works but when the path doesn't have this Child, it throw me this error :
firebase.js:283 Uncaught TypeError: Cannot read property '$value' of
firebase.js:276 FIREBASE WARNING: Exception was thrown by user callback.
TypeError: Cannot read property '$value' of undefined
I use Firebase-util and Angularfire like that :
var ref = firebase.database().ref();
var nc = new firebase.util.NormalizedCollection(
ref.child('accounts/' + $localStorage.accountId + '/demandes'),
[ref.child('demandes'), 'widget2']).select('widget2.duree', 'widget2.derniere_modification', 'widget2.reponses', 'widget2.exp', 'widget2.ajout_le', 'widget2.localisation').
filter(function(data, key, priority) {
return data.reponses.$value !== null; // This cause problems !
}).ref();
$scope.items = $firebaseArray(nc);
How can I do to test in a proper way other than return data.reponses.$value !== null; ? Thank you
It sounds like data.responses is undefined so you could check for $value like this:
.filter(function (data, key, priority) {
return data.responses && data.responses.$value !== null;
}).ref();
This makes sure that there is a responses field on data before you probe it for $value.

ARIA Enabled ComboBox Issue

ARIA enabled combobox gives me
TypeError: a is undefined
in Firefox whenever I click on the trigger. And obviously with the error clicking the trigger doesn't show any data.
Disabling ARIA, it works fine.
In Chrome, I get this error
Uncaught TypeError: Cannot read property 'isVisible' of undefined ext-aria.js:1
Ext.define.getErrorTipOwner ext-aria.js:1
Ext.define.onFocus ext-aria.js:1
Base.implement.callParent ext-all-debug.js:4266
Ext.define.onFocus ext-all-debug.js:87675
Base.implement.callParent ext-all-debug.js:4266
Ext.define.onFocus ext-all-debug.js:92499
Ext.define.onTriggerClick ext-all-debug.js:97364
Ext.define.onTriggerWrapClick ext-all-debug.js:92583
(anonymous function) VM122:6
wrap
Again Firefox' error:
TypeError: a is undefined
...rm.FieldContainer",ariaRole:"group",ariaGetEl:function(){return this.getTargetEl...
On using ext-aria-debug.js the error is on the following
TypeError: tip is undefined
if (tip.isVisible()) {
This is where the error is:
getErrorTipOwner: function() {
var tip = this.tip;
if (tip.isVisible()) {
return tip.ownerField;
}
return null;
},

Resources