Material UI button rendered with span that is not clickable - reactjs

Question

I am building a site using material-UI and have run into a bit of a snag. It seems that the button is being rendered with a span element around the button's text. This makes it so the click event only fires when you click outside the span element.
As you can imagine it's not the greatest UI to have users click buttons that don't do anything. I am sure that I am not the first one to go through this, is there a way that I can propagate the event down to the child element programmatically? Below is my component snipit:
import withRoot from '../onepirate/modules/withRoot';
// --- Post bootstrap -----
import React from 'react';
import { useState, useStyles } from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Grid from '#material-ui/core/Grid';
import Link from '#material-ui/core/Link';
import Typography from '../onepirate/modules/components/Typography';
import AppFooter from '../onepirate/modules/views/AppFooter';
import AppForm from '../onepirate/modules/views/AppForm';
import Button from '#material-ui/core/Button';
import MuiTextField from '#material-ui/core/TextField';
import List from '#material-ui/core/List';
import ListItem from '#material-ui/core/ListItem';
import ListItemText from '#material-ui/core/ListItemText';
import ListItemAvatar from '#material-ui/core/ListItemAvatar';
import Avatar from '#material-ui/core/Avatar';
import AddCircleIcon from '#material-ui/icons/AddCircle';
import WorkIcon from '#material-ui/icons/Work';
import BeachAccessIcon from '#material-ui/icons/BeachAccess';
import Divider from '#material-ui/core/Divider';
const Tickets = props => {
const useStyles = makeStyles(theme => ({
button: {
margin: theme.spacing(1),
backgroundColor: "#ff3366",
color: "#000000"
},
input: {
display: 'none',
},
ListItemText: {
marginLeft: 105,
}
}));
const classes = useStyles();
return (
<React.Fragment>
<AppForm>
<React.Fragment>
<Typography variant="h3" gutterBottom marked="center" align="center">
Order Tickets
</Typography>
<Typography variant="body2" align="center">
<Link href="/premium-themes/onepirate/sign-in/" underline="always">
Already have an account?
</Link>
</Typography>
</React.Fragment>
<Grid container spacing={2}>
<Grid item xs={12} sm={12}>
<List className={classes.root}>
<ListItem>
<Button
variant="contained"
className={classes.button}
onClick={props.quantity}
id="basic">
Add
</Button>
<ListItemText
primary="Basic"
secondary="$450"
className={classes.ListItemText}/>
{props.init.basic}
</ListItem>
<Divider variant="inset" component="li" />
<ListItem>
<Button
variant="contained"
className={classes.button}
onClick={props.quantity}
id="exec" >
Add
</Button>
<ListItemText
primary="Executive"
secondary="$550"
className={classes.ListItemText}/>
{props.init.exec}
</ListItem>
<Divider variant="inset" component="li" />
<ListItem>
<Button
variant="contained"
className={classes.button}
onClick={props.quantity}
id="vip">
Add
</Button>
<ListItemText
primary="VIP"
secondary="$750"
className={classes.ListItemText}/>
{props.init.vip}
</ListItem>
</List>
<Typography variant="h2">
{`Total: $ ${(props.init.basic * 450) + (props.init.exec * 550) + (props.init.vip * 750)}`}
</Typography>
<Button
className={classes.button}
size="large"
color="secondary"
fullWidth
onClick={props.price}
id=""
>
{'Proceed to Checkout'}
</Button>
</Grid>
</Grid>
</AppForm>
<AppFooter />
</React.Fragment>
);
}
export default withRoot(Tickets);
And the rendered HTML output of one of the buttons:
<button class="MuiButtonBase-root-307 MuiButton-root-290 makeStyles-button-87 MuiButton-contained-298"
tabindex="0"
type="button"
id="exec">
<span class="MuiButton-label-291">Add</span>
<span class="MuiTouchRipple-root-391"></span>
</button>

Answer 1

It seems that Material UI v4 accepts both e.target.value and e.currentTarget.value.
However, if you use e.target.value to deliver buttons' value, and click on the span node (nested inside of button), the value won't be taken from the button node that you assigned it to, but the span HTML element that does not have the value property and so the value is undefined.
To remedy the above, use e.currentTarget.value as it seems to pick up the value property from the button, even if you click on the span node.
Below sandbox should show you the difference in using e.target.value and e.currentTarget.value with material UI buttons.
https://codesandbox.io/s/elated-glitter-wqtt3?file=/src/App.js
Open up the console and click interchangeably on span and button elements and observe logs when you do that.
I have not tested the latest v5 from Material UI, it could be that they changed (improved?) this behaviour.

Answer 2

try wrapping span and button inside a div or other wrapper component and call onClick on that