I have a list that is dynamically generated with the following code snippet:
<list className = "todos-list">
{allTodos.map((todo, index)=> {
return (
<li className = "todo-element"> {todo} <DeleteButton id= {index}
callBackFunction = {deleteItem}/> </li>)
}
)}
</list>
In the output, {todo} and DeleteButton are displayed next to each other. This can be observed in the attached image.
The code for DeleteButton is as follows:
<span className = "DeleteButton"><DeleteIcon onClick = {deleteMain}/></span>
The delete icon is sourced from material-ui/icons. I am facing difficulty in positioning the delete button to the right uniformly across all list items.
Please refer to the provided image to understand the issue.
Can someone please suggest how I can resolve this? https://i.stack.imgur.com/P57VB.jpg