'disable other buttons using e.target.id

  • I have ten expansion panels.
  • on click of one button in one expansion panel I need to disable other buttons in other expansion panel
  • but the problem is when I try to target with an id I, its not returning e.target.id
  • it just returns as the value passed.
  • can you tell me how to fix it.
  • providing my sandbox and code snippet below.

https://codesandbox.io/s/material-demo-zi66l

diableOtherButtons = e => {
    console.log("diableOtherButtons e--->", e);
  };


  render() {
    const { classes } = this.props;
    console.log("get started *8888888888888888888888888888888888888888888888");
    return (
      <div className={classes.root}>
        <ExpansionPanel>
          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
            <Typography className={classes.heading}>first</Typography>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails>
            <Typography>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
              eget.
              <Typography>
                <Button
                  onClick={e => {
                    this.diableOtherButtons("s", "d");
                  }}
                  variant="outlined"
                  color="primary"
                  size="small"
                  // className={classes.button}
                >
                  button click
                </Button>
              </Typography>
            </Typography>
          </ExpansionPanelDetails>


Solution 1:[1]

I don't fully understand what you are trying to do. But you should look for the button under e.nativeTarget

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 NooB