Material UI 自动完成的多行选项

Question

I'm trying to make an autocomplete where each option has firstName and lastName of a user on the first line and their id on the second.

Here is what I've tried

<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",
            }}
          />
        )}
      />

I'm returning a component from renderOption but it does not pay attending to <div> or <br/> tags. It simply puts everything next to each other

Answer 1

Just use proper div to display on next line. Single Outer div and one nested div to show the id on next line.

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