Simplify javascript expression

Question

i have this function in javascript:

export const commonRenderer = (option, useFormatter, hasSubLabel) => {
  if (useFormatter && hasSubLabel) {
    return (
      <React.Fragment>
        <FormattedMessage id={option.label} /><br /><FormattedMessage id={option.subLabel} />
      </React.Fragment>
    );
  }
  if (!useFormatter && hasSubLabel) {
    return (
      <React.Fragment>
        {option.label}<br />{option.subLabel}
      </React.Fragment>
    );
  }
  if (useFormatter && !hasSubLabel) {
    return (
      <FormattedMessage id={option.label} />
    );
  }
  return option.label;
};

and somehow i want to simplify this seems it looks really odd to me but im afraid of losing some cases. Any help?

Answer 1

Not sure if it's simpler or not, but you may try something like this:

export const commonRenderer = (option, useFormatter, hasSubLabel) => {
    const Element = useFormatter ? FormattedMessage : React.Fragment;
    const attr = useFormatter ? 'id' : 'children';

    return (
        <React.Fragment>
            <Element {...{ [attr]: option.label }} />
            {hasSubLabel && (
                <React.Fragment>
                    <br />
                    <Element {...{ [attr]: option.subLabel }} />
                </React.Fragment>
            )}
        </React.Fragment>
    );
};