<List>
{instructionList.map((el) => (
<ListItem divider key={el.id}>
{el.type === 'number' ?
<React.Fragment>
<Typography variant="inherit" component="span">
{el.number}
</Typography>
<ListItemText>{el.instruction}</ListItemText>
</React.Fragment> :
<React.Fragment>
<Checkbox disableRipple />
<ListItemText>{el.instruction}</ListItemText>
</React.Fragment>}
<ListItemSecondaryAction>
<IconButton onClick={() => deleteInstruction(el.id)}>
<DeleteIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
))
}
</List>
https://i.stack.imgur.com/7bLxa.png
I am looking to conditionally render a numbered bullet point list item or a checkbox based on the value of el.type ('number' or 'checkbox'). How can I achieve this?