Is there a way to dynamically remove the space between removed chips and older chips in Material-UI when deleting one of them?
<div className="row contactsContainer">
{contacts.map((contact) => (
<div className="col-lg-1 col-md-3 col-sm-4 col-xs-6 my-5">
<Chip
id={contact!.phone}
label="delete"
variant="outlined"
color="primary"
deleteIcon={
<HighlightOffOutlinedIcon id={`del-${contact!.phone}`} />
}
onDelete={handeldelete}
avatar={
<Avatar
alt={`${contact ? contact.phone : ""}`}
src={lady}
className={`li-avatar ${contact ? "" : "d-none"}`}
title={contact?.phone}
/>
}
/>
</div>
))}
<div className="col-lg-1 col-md-3 col-sm-4 col-xs-6 my-5 ">
{/* <Chip
id="addContact"
label="delete"
avatar={
<Avatar
alt="add contact"
src={add_image}
className={`li-avatar`}
title="Add New Contact"
/>
}
/> */}
<div>
<a onClick={handleClickOpen}>
<img src={add_image} alt="add_image" className="circle_image" />
</a>
</div>
</div>
</div>
Any suggestions on how to achieve this? Can I accomplish this using Material-UI instead of Bootstrap as shown in this example?