How can I use async and await in react render - reactjs

Question

I'm developing a react-native app and I want to multi language support. I also wrote languageHelper to be easy to manage.
languageHelper.js
import AsyncStorage from '#react-native-async-storage/async-storage';
export const Translator = async (key) => {
try {
const langCode = await AsyncStorage.getItem('#lang_code')
return I18n.t(key, { locale: langCode ?? 'en' })
} catch (e) {
return I18n.t(key)
}
}
login.js
render() {
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<KeyboardAvoidingView behavior={'height'} style={styles.container}>
<ScrollView>
<ImageBackground source={require('../Sources/LoginBg.jpg')} style={styles.backgroundImage}>
<Layout style={styles.header}>
<Text category='h1' status='primary'> {Translator('Login_hello')}</Text>
<Text category='h6' status='primary'> {Translator('Login_signInMessage')}</Text>
</Layout>
Error I encountered
Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection of children, use an array instead.
But since Translator is a async func so I can't use in render. (I tried to async render).
How can I solve this? Thanks for helping.

Answer 1

Well this seems like a not so performant code, but if you want to make it work anyways you could return an empty string while your translation is working on it, something like this:
import AsyncStorage from '#react-native-async-storage/async-storage';
export const Translator = React.memo(({key}) => {
const [text, setText] = useState('')
React.useEffect(() => {
translate()
}, [key])
const translate = async () => {
try {
const langCode = await AsyncStorage.getItem('#lang_code')
setText(I18n.t(key, { locale: langCode ?? 'en' }))
} catch (e) {
setText(I18n.t(key))
}
}
return (
<Text>{text}</Text>
)
})
and you could use it like this in you code (using your example):
render() {
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<KeyboardAvoidingView behavior={'height'} style={styles.container}>
<ScrollView>
<ImageBackground source={require('../Sources/LoginBg.jpg')} style={styles.backgroundImage}>
<Layout style={styles.header}>
<Translator('Login_hello')} />
<Translator('Login_signInMessage')} />
</Layout>
You also can make you translator accept styling props to customize the end result. Also really important to use the memo there so you don't have extra renders on your translate component as it always request from async.
Other solution
The solution I would actually recommend is to create a translation provider and configure the i18n globally there so you'll have only one storage request and your translate component will be really less expensive to load.
Success on your project.