i have a react select input using checkboxes and a list item text to denote selected values.
When i use the ListItemText, the selected values get displayed as objects but when i just display the {option.title} in the menu item the actual text gets displayed. Is there another specific way i should display text in the ListItemText? Any advise will be appreciated.
Code :
{
"id": 288,
"category_id": 3,
"title": "Test",
"kpi_unit_of_measure": "%>",
"updated_by": 9,
"created_by": 9,
"date_created": "2021-12-15T21:00:00.000+0000",
"date_updated": "2022-01-09T21:00:00.000+0000",
"user_id": 9,
"account": "Revenue",
"variance": "green",
"target": "70",
"actualYTD": "10",
"plannedYTD": "10",
"rootCause": null,
"action": null,
"supportRequired": null,
"categories": {
"id": 3,
"description": "Talent and Culture"
}
}
When i use ListItemText, my selected values get displayed like an object : Image here
error
Code :
{kpis && kpis.map((option) => (
<MenuItem key={option.id} value={option.id}
classes={{
root: classes.selectMenuItem,
selected: classes.selectMenuItemSelectedMultiple,
}}>
<ListItemIcon>
<Checkbox checked={kpi_id.includes(option.id)} />
</ListItemIcon>
<ListItemText primary={option.title} title={option.title}> {option.title}</ListItemText>
</MenuItem>
))}
But when i remove the checkbox i can view the title of the option , shouldi display the text in the ListItemText differently?
Image here : expected
Code :
{kpis && kpis.map((option) => (
<MenuItem key={option.id} value={option.id}
classes={{
root: classes.selectMenuItem,
selected: classes.selectMenuItemSelectedMultiple,
}}>
{option.title}
</MenuItem>
))}