Material- UI icon disturbing the working of button

user_14595151 0
Viewed 561

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);})
        }
        
    }
material-ui reactjs
2 Answers

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.

user_106437450

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.

user_92943440
Related