Многострочные параметры для автозаполнения пользовательского интерфейса материала

Question

Я пытаюсь сделать автозаполнение, где каждая опция имеет firstName и lastName из user в первой строке и их id во второй.

Вот что я Я пробовал

<Autocomplete
        freeSolo
        disableClearable
        options={users}
        getOptionLabel={(option) => option.firstName + " " + option.lastName}
        renderOption={(option) => {
          return (
            <>
              <div>
                {option.firstName} {option.lastName}
              </div>
              <div>{option.id}</div>
            </>
          );
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Username or ID"
            // margin="normal"
            variant="outlined"
            value={name}
            onChange={handleChange}
            className={classes.input}
            InputProps={{
              ...params.InputProps,
              type: "search",
            }}
          />
        )}
      />

Я возвращаю компонент из renderOption, но он не платит за использование тегов <div> или <br/>. Просто кладет все рядом друг с другом

Answer 1

Просто используйте правильный div для отображения в следующей строке. Один внешний div и один вложенный div для отображения идентификатора в следующей строке.

renderOption={(option) => {
      return (
        <>
          <div>
            {option.title} {option.title}
            <div>
              {option.title}
            </div>
          </div>
        </>
      );
    }}