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
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>
</>
);
}}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.