On click on delete throws error Unknown event handler property `onDelete`

Question

System throws below error during on click on the delete icon in the Home screen and the delete player is not happening.

 Warning: Unknown event handler property `onDelete`. It will be ignored.
    in div (created by ForwardRef(Modal))
    in ForwardRef(Portal) (created by ForwardRef(Modal))
    in ForwardRef(Modal) (created by ForwardRef(Dialog))

Home.js

 const [deleteDialog, setDeleteDialog] = useState(false);
 const [playerId, setPlayerId] = useState("");

 const deletePlayer = (id) => e => {
    setPlayerId(id);
    setDeleteDialog(true);
  }

  const onDelete = id => () => {
    try {
      Axios.delete('http://localhost:8000/service/player', id);
      setDeleteDialog(false);
    } catch (e) {
      console.log(e);
    }
  }

 return (
    <div className="App">
      <div className="wrapper">
        <div className="playerList_header">
          <h1>Players</h1>
        </div>
        <div className="playerList_home_page">
          <div className="grid-container">
            {
              searchResults.map(({ id, image, position, name }) => (
                <div key={id} className="grid-item">
                  {
                    deleteIcon.show && (
                      <span className="deletePlayerButton" onClick={deletePlayer(id)}>
                        <img className="deletePlayerimg" src="/images/delete.png"></img>
                      </span>
                    )}
                  <div>
                    <img alt="" className="playerProfilePic_home_tile" key={image} src={image}></img>
                  </div>
                  <div className="playerProfile_grid_border">
                    <span className="rec_name_position_data">
                      <h3 key={name}>{name}</h3>
                      <span className="playerPosition_home_tile" key={position}>{position}</span>
                    </span>
                  </div>              
                </div>
              ))
            }
          </div>
        </div>
      </div>
    <AlertDialog
    onDelete={onDelete(playerId)}
    open={deleteDialog}
    onClose={() => setDeleteDialog(false)}
    playerId={playerId}
  />
    </div>
  );

Dialog.js

On the Yes button onClick={ onDelete(playerId) }

export default function AlertDialog({ open, onClose, onDelete, playerId }) {
  return (
    <Dialog
      open={open}
      onClose={onClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title">{"Delete the player ?"}</DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description">
          Pressing Yes will delete the player with ID {playerId}.
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} color="primary">
          No
        </Button>
        <Button onClick={ onDelete(playerId) } color="primary" autoFocus>
          Yes
        </Button>
      </DialogActions>
    </Dialog>
  );
}

Server.js

    app.delete('/service/player', async (req, res) => {
  try {
    const userId = req.body.id;
    console.log("UserId"+userId);
    const deletePlayer = await UserModel.destroy({
      where:{ id : userId }
    })
    res.status(200).json({ deletePlayer });
    } catch (e) {
    res.status(500).json({ fail: e.message });
   }
});

gdh · Accepted Answer · 2020-06-04T13:08:14.193

1

Make sure to pass playerId to onDelete method

1st way Since your onDelete function has a function inside function. Just call onDelete and pass playerId

       <Button onClick={onDelete(playerId)} color="primary" autoFocus>
          Yes
        </Button>

2st way Rewrite onDelete properly. There is no need to put fun inside a fun.

const onDelete = id => {
    try {
      Axios.delete('http://localhost:8000/service/player', id);
      setDeleteDialog(false);
    } catch (e) {
      console.log(e);
    }
  }

Now just call provide an inline arrow function to onClick

       <Button onClick={() => onDelete(playerId)} color="primary" autoFocus>
          Yes
        </Button>

edited Jun 04 '20 at 13:08

answered Jun 04 '20 at 13:02

gdh

13,114
2
16
28

When I remove `const onDelete = id => () => {...` and corrected as suggested `const onDelete = id => {`..it throws Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. and points here .. ReactDOM.render(React.createElement(App, null), document.getElementById('root')); – soccerway Jun 04 '20 at 13:23
@soccerway, if you are trying second option you have to change all `{onDelete(playerId)}` to `{() => onDelete(playerId)}` as you are using it 2 places one with `Dialog` and second with `Button` , you might have changed it only one place – Vivek Doshi Jun 04 '20 at 13:26
I have changed both places, in Home ` onDelete(playerId)} open={deleteDialog} onClose={() => setDeleteDialog(false)} playerId={playerId} />` and then – soccerway Jun 04 '20 at 13:43
in home it should look like : ` – Vivek Doshi Jun 04 '20 at 13:52
I have set a break point in the server.js line `const userId = req.body.id;` while loading itself the operation become active at the break point set ( with out clicking on the delete icon ) and become undefined error, createError.js:16 Uncaught (in promise) Error: Request failed with status code 500 at createError (createError.js:16) at settle (settle.js:17) – soccerway Jun 04 '20 at 13:58
@soccerway, please show us the updated code, we can't assume what are the changes you have made till now – Vivek Doshi Jun 04 '20 at 13:59
@VivekDoshi I have updated the question with most recent changes. – soccerway Jun 04 '20 at 14:07
@soccerway, as per the changes it looks like you are following first method and not second – Vivek Doshi Jun 04 '20 at 14:15
@soccerway change ` – Vivek Doshi Jun 04 '20 at 14:17
I have changed to ` – soccerway Jun 04 '20 at 14:25
@soccerway, I think you are using delete incorrectly `Axios.delete('http://localhost:8000/service/player', id);` , please review https://stackoverflow.com/questions/51069552/axios-delete-request-with-body-and-headers, after change `console.log(req.body)` in your backend, and your main issue is solved so at least you can accept the answer and upvote as this is now completely diff issue – Vivek Doshi Jun 04 '20 at 14:30

score 0 · Answer 2 · answered Jun 04 '20 at 12:54

0

<Dialog
    open={open}
    onClose={onClose}
    onDelete={onDelete}
    aria-labelledby="alert-dialog-title"
    aria-describedby="alert-dialog-description"
>

Dialog component doesn't have prop onDelete https://material-ui.com/api/dialog/

answered Jun 04 '20 at 12:54

Nikita Madeev

4,284
9
20

Thank you, now the error got resolved, but deleting the player is not happening though. – soccerway Jun 04 '20 at 12:59
@soccerway Axios request started? Or any errors in the console? – Nikita Madeev Jun 04 '20 at 13:02
Sorry I have got one more error,didn't saw that. findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. in Transition (created by ForwardRef(Fade)) in ForwardRef(Fade) (created by ForwardRef(Backdrop)) in ForwardRef(Backdrop) (created by WithStyles(ForwardRef(Backdrop))) in WithStyles(ForwardRef(Dialog)) (at Dialog.js:11) in AlertDialog (at Home.js:124) div (at Home.js:78) – soccerway Jun 04 '20 at 13:03

On click on delete throws error Unknown event handler property `onDelete`

2 Answers2