insomnia/app/ui/components/rendered-text.js

// @flow
import * as React from 'react';

type Props = {
  children: string,
  render: Function
};

type State = {
  renderedText: string,
  error: string
};

class RenderedText extends React.PureComponent<Props, State> {
  constructor (props: any) {
    super(props);
    this.state = {
      renderedText: '',
      error: ''
    };
  }

  async _render () {
    const {render, children} = this.props;

    if (!children) {
      return;
    }

    try {
      const renderedText = await render(children);
      this.setState({renderedText, error: ''});
    } catch (err) {
      this.setState({error: err.message});
    }
  }

  componentDidMount () {
    this._render();
  }

  componentDidUpdate () {
    this._render();
  }

  render () {
    if (this.state.error) {
      return (
        <span className="font-error" style={{fontSize: '0.9em', fontStyle: 'italic'}}>
          {this.state.error || 'Unknown Error'}
        </span>
      );
    } else {
      return this.state.renderedText || '';
    }
  }
}

export default RenderedText;