Unable to introduce list data to pluggable widget react components

0
When attempting to work with entities in a widget via the dataSource xml property type, I’m unable to access anything about the actual list items themselves. I understand that the items array in the ListValue object that is passed isn’t particularly useful on its own but even calling the get method has mendix throwing “cannot read properties of undefined” errors. This is despite the this.props.data.status call returning avaliable and this.props.data.items?.length showing the correct number of items (though throwing an error when the “?” is omitted).    In particular, the following code is problematic despite almost entirely coming from the default template and the code to access attributes of a dataSource from the list values for pluggable widgets documentation.   That throws the following error:  Any help or insight would be greatly appreciated. Thank you in advance.
asked
2 answers
4

The items of the datasource will switch from having Status Unavailable to Available, triggering a rerender of the widget. I guess the error is thrown on the first render when the items are not yet having the proper status. Can’t you add some if statements to check whether the items exist etc? Another option could be to only render if the datasource items have status ‘Available’

 

I have implemented such behavior in for instance my Google Maps Custom Marker (React) widget available in the Marketplace.

answered
1

I was able to get the widget working thanks to Ivo Sturm’s insights. The updated and annotated code is below in case someone else runs into the same issues. 

answered