Intl.NumberFormat causes Objects are not valid as a React child

[francisrod01]

I followed the example to implement Intl.NumberFormat as async call but..

https://github.com/taggon/react-native-intl/blob/master/Examples/Hello/index.android.js

There is a problem to render in a ListItem of react-native-elements or wherever else... ListView.. because the element in a list invokes this async method always like this:

parse-times.js

const formatNumber = async (number, hasSymbol) => {
    const symbol = (hasSymbol) ? numberOpts : {}

    return await new Intl.NumberFormat(parseLocaleUser, symbol).format(number)
}

list-data.js

async formatNumber(number) {
    const formattedNumber = await parseTimes.formatNumber(number, true)
    console.log('========== parse number: ', formattedNumber)
    return formattedNumber
}

..

<Card
    title={"Results for this tags: #motorboat, #ride, #boat"}
>
    { services.map((s, i) => {
        const formattedNumber = this.formatNumber(s.price)

        return (
            <ListItem
                key={i}
                leftIcon={{
                    name: 'circle-o',
                    type: 'font-awesome',
                    style: { color: 'gray' },
                }}
                title={
                    <Text style={styles.medium}>{ s.name }</Text>
                }
                subtitle={
                    <View style={styles.row}>
                        <View style={styles.column}>
                            <Text style={{ color: 'steelblue' }}>
                                { this.showAnothers(s) }
                            </Text>
                        </View>
                    </View>
                }
                badge={{
                    value: formattedNumber,
                    textStyle: { color: 'orange' },
                    containerStyle: { marginTop: 30 },
                }}
                onPress={() => this.goToDetails(s)}
            />
        )
    })}
</Card>

I don't know why this returned a promise also.

[mikelambert]

Yes, you cannot use async methods from a render function.

And even if it wasn't a render function...you're calling your async method without using await, which is going to give you a Promise as a return value...

[francisrod01]

hmm thank you @mikelambert for answer me!

So.. I don't know how to solve this, because I need to show this value there and I don't use the same this.state.formattedNumber for more than one value to render in ListItem.

[francisrod01]

Well, I solved this with Async component from react-promise.

https://github.com/capaj/react-promise

Thank you @mikelambert !!