How to use a decimal in a React Widget

0
I am trying to create a widget with React that requires me to pass a latitude and a longitude. Both are stored as decimal.  This is my configuration xml file <properties> <propertyGroup caption="Data source"> <property key="latitude" type="attribute"> <caption>Latitude</caption> <description/> <attributeTypes> <attributeType name="Decimal"/> </attributeTypes> </property> <property key="longitude" type="attribute"> <caption>Longitude</caption> <description/> <attributeTypes> <attributeType name="Decimal"/> </attributeTypes> </property> </propertyGroup> </properties> This is my main component, where I am taking those latitude and longitude and passing it on to me view component. Note that I am passing “.value” export default class StreetView extends Component { render() { return <View latitude={this.props.latitude.value} longitude={this.props.longitude.value } />; } } Finally this is what I have in my view component: const latitude = parseFloat(this.props.latitude)) const longitude = parseFloat(this.props.longitude)) Those latitude and longitude seem to be of type “number” and if I just display them as text they seem correct. However the library that I am using (react-streetview) does not seem to recognize them. Yet, if I hardcode the latitude and longitude to random values like 1.4456 and -0.23456 for instance, the library does work. Something must be wrong with the way I parse the variable coming from Mendix.  I don’t understand what is the difference between the decimal number coming from a variable which doesn’t work and the hard coded one which does work.  Do I need to use something else than parseFloat here? Maybe Big.js? Or is there a method I need to call on this.props.latitude, instead of using parsefloat? And finally, where is this all documented? Edit: I have create a repo to share my code: https://github.com/Arthurgoujon/MendixWidget_StreetView   thanks!
asked
2 answers
0

 

Hi!

Maybe this can help: https://docs.mendix.com/apidocs-mxsdk/apidocs/pluggable-widgets-property-types

It says it is passed to the client component as a Big.

 

answered
0

Thanks to a colleague of mine, I now have the answer to this question. The correct way to use a decimal in the widget is indeed 

const myDecimalNumber = parseFloat(this.props.latitude.value)

However, what was happening is that my StreetView component was rendering initially when the value was still loading. When the value was finally loaded, the component does not re-render.

Note that same as you can find “.value” to get the value, you can also call “.status” to see whether it is loaded or not. I think it is either “Available” or “Loading”. With this, we were able to only render once the value is loaded: 

class StreetView extends Component {
    render() {
        if(this.props.latitude.status!=="available" && this.props.longitude!=="available"){
            return <div></div>;
        }
        return <View  
                    latitude={this.props.latitude.value || 0} 
                    longitude={this.props.longitude.value || 0} />;
    }
}

That’s it!

answered