react-native-intl icon indicating copy to clipboard operation
react-native-intl copied to clipboard

Using in a render() method?

Open mikelambert opened this issue 8 years ago • 3 comments

So I understand I can construct a translator object and use _ in my render() method without any problems. But I'm confused how I would go about using date/time formatting functions within a render() method, due to their asynchronous nature. I have a proposed solution below, but I believe this results in a flash of "empty data" before showing the real data (similar to the flash-of-unstyled-text in the HTML world), and am curious if there's a better way...a pure JS solution, a la one of the other libraries out there. Thanks!

class TranslatedDate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {translatedDate: null};
    this.translate();
  }

  async translate() {
    const translatedDate = await new Intl.DateTimeFormat('en-US').format(date);
    this.setState({translatedDate});
  }

  render() {
    return <Text>{this.state.translatedDate}</Text>;
  }
}

mikelambert avatar Jun 21 '16 07:06 mikelambert