Currently, I am facing a requirement where I need to display both the name and email address in the options list. However, at the moment, I am only able to render one parameter. How can I modify my code to render all the options with both name and email?
https://i.stack.imgur.com/Vy4k5.png
This is my current code:
<Autocomplete
freeSolo
disabled={false}
fullWidth={false}
label={'label'}
multiple={true}
componentsProps={{
paper: {
sx: {
border: '1px solid lightgray',
marginLeft: 10.5,
width: 484,
}
}
}}
options={[
{ email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="630213130f0623040e020a0f4d000c0e">[email protected]</a>', label: 'apple', value: 'apple' },
...
]}
renderOption={React.useCallback((props, option, { inputValue }) => {
return (
<Box component='li' {...props}>
{option.label}
</Box>
)
})}
/>