How to use the @elastic/eui.htmlIdGenerator function in @elastic/eui

export const SeriesConfig = props => {
  const defaults = { offset_time: '', value_template: '' };
  const model = { ...defaults, ...props.model };
  const handleSelectChange = createSelectHandler(props.onChange);
  const handleTextChange = createTextHandler(props.onChange);
  const htmlId = htmlIdGenerator();
  const seriesIndexPattern =
    props.model.override_index_pattern && props.model.series_index_pattern
      ? props.model.series_index_pattern
      : props.indexPatternForQuery;

  return (
    <div>
      

      

      }
        fullWidth
      &gt;</div>

render() {
    const defaults = { filter: '' };
    const model = { ...defaults, ...this.props.model };
    const { selectedTab } = this.state;
    const handleSelectChange = createSelectHandler(this.props.onChange);
    const handleTextChange = createTextHandler(this.props.onChange);
    const { intl } = this.props;

    const htmlId = htmlIdGenerator();

    const alignOptions = [
      {
        label: intl.formatMessage({ id: 'tsvb.markdown.alignOptions.topLabel', defaultMessage: 'Top' }),
        value: 'top'
      },
      {
        label: intl.formatMessage({ id: 'tsvb.markdown.alignOptions.middleLabel', defaultMessage: 'Middle' }),
        value: 'middle'
      },
      {
        label: intl.formatMessage({ id: 'tsvb.markdown.alignOptions.bottomLabel', defaultMessage: 'Bottom' }),
        value: 'bottom'
      }
    ];
    const selectedAlignOption = alignOptions.find(option => {

render() {
    const htmlId = htmlIdGenerator();
    const value = this.props.value || '';
    let defaultValue = value;
    if (!_.includes(['bytes', 'number', 'percent'], value)) {
      defaultValue = 'custom';
    }
    if (isDuration(value)) {
      defaultValue = 'duration';
    }
    const { intl } = this.props;
    const options = [
      {
        label: intl.formatMessage({
          id: 'visTypeTimeseries.dataFormatPicker.bytesLabel',
          defaultMessage: 'Bytes',
        }),
        value: 'bytes',

function SeriesAggUi(props) {
  const { panel, model, intl } = props;

  const handleChange = createChangeHandler(props.onChange, model);
  const handleSelectChange = createSelectHandler(handleChange);

  const htmlId = htmlIdGenerator();

  const functionOptions = [
    {
      label: intl.formatMessage({ id: 'tsvb.seriesAgg.functionOptions.sumLabel', defaultMessage: 'Sum' }),
      value: 'sum'
    },
    {
      label: intl.formatMessage({ id: 'tsvb.seriesAgg.functionOptions.maxLabel', defaultMessage: 'Max' }),
      value: 'max'
    },
    {
      label: intl.formatMessage({ id: 'tsvb.seriesAgg.functionOptions.minLabel', defaultMessage: 'Min' }),
      value: 'min'
    },
    {
      label: intl.formatMessage({ id: 'tsvb.seriesAgg.functionOptions.avgLabel', defaultMessage: 'Avg' }),

}),
        value: 'lt',
      },
      {
        label: intl.formatMessage({
          id: 'visTypeTimeseries.colorRules.lessThanOrEqualLabel',
          defaultMessage: '<= less than or equal',
        }),
        value: 'lte',
      },
    ];
    const handleColorChange = part => {
      const handleChange = collectionActions.handleChange.bind(null, this.props);
      handleChange(_.assign({}, model, part));
    };
    const htmlId = htmlIdGenerator(model.id);
    const selectedOperatorOption = operatorOptions.find(option => {
      return model.operator === option.value;
    });

    const labelStyle = { marginBottom: 0 };

    let secondary;
    if (!this.props.hideSecondary) {
      secondary = (

function YesNo(props) {
  const { name, value } = props;
  const handleChange = value => {
    const { name } = props;
    return () => {
      const parts = { [name]: value };
      props.onChange(parts);
    };
  };
  const htmlId = htmlIdGenerator();
  const inputName = name + _.uniqueId();
  return (
    <div>
      )}
        className="eui-displayInlineBlock"
        name={inputName}
        checked={Boolean(value)}
        value="yes"
        onChange={handleChange(1)}
      /&gt;
</div>

export const SplitByTermsUI = ({
  onChange,
  indexPattern,
  intl,
  model: seriesModel,
  fields,
  uiRestrictions,
  seriesQuantity,
}) => {
  const htmlId = htmlIdGenerator();
  const handleTextChange = createTextHandler(onChange);
  const handleSelectChange = createSelectHandler(onChange);
  const model = { ...DEFAULTS, ...seriesModel };
  const { metrics } = model;
  const defaultCount = {
    value: '_count',
    label: intl.formatMessage({
      id: 'visTypeTimeseries.splits.terms.defaultCountLabel',
      defaultMessage: 'Doc Count (default)',
    }),
  };
  const terms = {
    value: '_key',
    label: intl.formatMessage({ id: 'visTypeTimeseries.splits.terms.termsLabel', defaultMessage: 'Terms' }),
  };

panel
  } = props;

  const handleChange = createChangeHandler(props.onChange, props.model);
  const handleSelectChange = createSelectHandler(handleChange);
  const handleTextChange = createTextHandler(handleChange);
  const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;

  const defaults = {
    numerator: '*',
    denominator: '*',
    metric_agg: 'count'
  };

  const model = { ...defaults, ...props.model };
  const htmlId = htmlIdGenerator();

  const restrictMode = model.metric_agg === 'cardinality' ? 'none' : 'numeric';

  return (

export const PositiveOnlyAgg = props => {
  const { siblings } = props;

  const defaults = { unit: '' };
  const model = { ...defaults, ...props.model };

  const htmlId = htmlIdGenerator();
  const handleChange = createChangeHandler(props.onChange, model);
  const handleSelectChange = createSelectHandler(handleChange);

  return (

const handleTextChange = createTextHandler(props.onChange);

  const defaults = {
    fill: '',
    line_width: '',
    point_size: '',
    value_template: '{{value}}',
    offset_time: '',
    split_color_mode: 'gradient',
    axis_min: '',
    axis_max: '',
    stacked: 'none',
    steps: 0
  };
  const model = { ...defaults, ...props.model };
  const htmlId = htmlIdGenerator();
  const { intl } = props;

  const stackedOptions = [
    { label: intl.formatMessage({ id: 'tsvb.timeSeries.noneLabel', defaultMessage: 'None' }), value: 'none' },
    { label: intl.formatMessage({ id: 'tsvb.timeSeries.stackedLabel', defaultMessage: 'Stacked' }), value: 'stacked' },
    { label: intl.formatMessage({ id: 'tsvb.timeSeries.percentLabel', defaultMessage: 'Percent' }), value: 'percent' }
  ];
  const selectedStackedOption = stackedOptions.find(option => {
    return model.stacked === option.value;
  });

  const positionOptions = [
    { label: intl.formatMessage({ id: 'tsvb.timeSeries.rightLabel', defaultMessage: 'Right' }), value: 'right' },
    { label: intl.formatMessage({ id: 'tsvb.timeSeries.leftLabel', defaultMessage: 'Left' }), value: 'left' }
  ];
  const selectedAxisPosOption = positionOptions.find(option => {