Numbered list in Material UI

user_16624522 0
Viewed 235
<List>
                        {instructionList.map((el) => (
                            <ListItem divider key={el.id}>
                                <Checkbox disableRipple />
                                <ListItemText>{el.instruction}</ListItemText>
                                <ListItemSecondaryAction>
                                    <IconButton onClick={() => deleteInstruction(el.id)}>
                                        <DeleteIcon />
                                    </IconButton>
                                </ListItemSecondaryAction>
                            </ListItem>
                        ))
                        }
                    </List>

enter image description here

I want to conditionally render a numbered bulletpoint list item or a checkbox based on whether el.type === 'number' or el.type === 'checkbox'. How do I do this?

material-ui reactjs css javascript
1 Answers

You can filter the instructionList before mapping them.

instructionList.filter(el =>
  el.type == 'type_you_want'
).map(el =>
  ...
)
user_141408700
Related