Reputation: 47
When I click in the space around the icon,The button works correctly and the post get deleted.But when clicked on the icon (<DeleteOutlineOutlinedIcon />)
, the post doesn't get deleted.As the name of the button is props.id, when I log the name, it shows undefined, I also tried to give the same name to the icon, but still it doesn't work.
<button name={props.id} onClick={deletePost}><DeleteOutlineOutlinedIcon /></button>
This is the deletePost
function
function deletePost(e){
e.preventDefault();
if(window.confirm("Are you sure to delete"))
{
let {name} = e.target;
console.log(name);
$.post("http://localhost:4000/delete" , {name})
.done(res=>{
setAll({value:res});
console.log(allPosts);
})
.fail(e=>{console.log(e);})
}
}
Upvotes: 2
Views: 1342
Reputation: 1231
Ideally you should wrap MUI Icon components with <IconButton> </IconButton>
you can import that using import {IconButton} from '@material-ui/core'
so in your case it will be <IconButton onClick={deletePost}><DeleteOutlineOutlinedIcon /></IconButton>
Edit: to get the correct value for the name
property try:
let name = e.target.getAttribute('name');
And by the way some attribute names aren't really appropriate to use in this condition and in some situations can maybe result in undesired behaviour (for example trying to set a name attribute on a <th>
HTML element) you want a piece of data (a variable) which normally shouldn't even be done this way as you could just easily do deletePost(e,props.id)
giving props.id
as a parameter directly to your function.
Upvotes: 1
Reputation: 301
A bit more context may be needed for people to fully comprehend the issue. On first look I am wondering why you are wrapping a component in a button.
To create an outlined button with an icon using material-ui I'd stick to the material-ui documentation. So something along the lines of:
<Button
variant="outlined"
color="secondary"
className={classes.button}
startIcon={<DeleteIcon />}
>
Where <DeleteIcon/>
is an Icon you need to import from the material-ui library.
Upvotes: 0