Issue
I have a simple translation function that takes one parameter(string) and return string. It works fine when i use like await translation(key)
how ever my need it to use it frequently inside in react native component like below
<Text>{tranlate("faqs")}</Text>
Then again somewhere
<Button title={translate("terms")}/>
My question is although its a async function and not trigger without await or then/catch block. What could be other way i can simple use it without await or then/catch because using it like below is not working
<Text>{await translate("faqs")}</Text>
Any help would be really appriciated!Thanks
Solution
It's better to create a custom hook which takes key
as input and return translated key.
You shouldn't use async-await
in (J|T)SX
.
So it can also be used in multiple components
const _cache = {};
function useTranslate(key) {
const [state, setState] = useState(key);
useEffect(() => {
(async () => {
try {
// IF PROMISE RESOLVED THEN GET TRANSLATED VALUE
const cachedValue = _cache[key];
if (!cachedValue) {
const translatedValue = await translate(key);
_cache[key] = translatedValue;
setState(translatedValue);
} else setState(cachedValue);
} catch (error) {
console.log(error);
}
})();
}, [key]);
// IF VALUE IS TRANSLATED THEN IT WILL RETURN VALUE
// ELSE RETURN KEY AS A FALLBACK VALUE
return state;
}
export default function App() {
const translateFAQ = useTranslate("faqs");
return (
<div className="App">
<Text>{translateFAQ}</Text>
</div>
);
}
Answered By - DecPK
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.