I need to pass suggestion._id to my action as response_id on onClick but some reason I’m receiving [object%20Object] in console. I tried response_id: suggestion._id in order to declare it first but didn’t work.

Action :

export const deleteResponse = (id, response_id) => async dispatch => {
  try {
    await axios.delete(`/api/suggestions/response/${id}/${response_id}`);
    dispatch({ type: DELETE_REPONSE, payload: response_id });
    dispatch(setAlert('Review removed', 'success'));
  } catch (err) {
    dispatch({
      type: RESPONSE_ERROR,
      payload: {
        msg: err.response,
        status: err.response.status,
      },
    });
  }
};

Component in frontend:

 <Box mt='auto'>
      <Flex justifyContent={'space-between'} mb='2'>
        {suggestion._id}
        <Box my='auto'>
          {!auth.loading && user === auth.user._id && (
            <Button
              type='button'
              
              onClick={(e) =>
                deleteResponse(id, {
                  response_id: suggestion._id,
                })
              }
            >
              Remove
            </Button>
          )}
        </Box>
      </Flex>
     
    </Box>;

>Solution :

This is because you forgot to destructure, you need to do it like this:

export const deleteResponse = (id, { response_id }) => async dispatch => {