React - передача значка font awesome в качестве опоры

Question

Я использую звездочку font awesome, чтобы указать требуемый ввод формы, передавая его как опору компоненту ввода формы. Вместо рендеринга он рендерит [объект Object].

Свойства:

<FormInput
      label={"Title " + (<i className="fas fa-asterisk fa-1x"></i>)}
      id="title"
      value={title}
      onChange={e => this.handleChange(e, 'title')}
/>

Компонент:

const FormInput = ({ value, label, onChange, id }) => {
    return (
        <FormControl>
            <InputLabel htmlFor={id}>{label}</InputLabel>
            <Input
                id={id}
                value={value}
                onChange={onChange}
            />
        </FormControl>
    );
};

Как я могу визуализировать html элемент передан как опора? Любая помощь приветствуется.

Answer 1

Я думаю, может быть, передать имя класса и добавить его в i в FormControl