CODEWITHSUNDEEP
reactjsmaterial-ui
Kramer
Kramer

Reputation: 399

Opening Unique modal or popper based on button click

I am using material-ui library where I have a popper inside a loop each loop has one event object stored in cards. I want to open popper based on button click which is placed on each cards but all the popper gets opened since on button click I am setting 'open' state as true. I want to make this value unique for each popper so that I set the value for that popper which needs to be opened.

I tried to make open as unique but don't know how.

 this.state = {
      open: false,
    }

  handleClickButton = event => {
  console.log(event.target)
  this.setState(state => ({
      open: !state.open,
    }));
  };

Here is the render method code:

   {this.props.events.map((event) =>
           (

           <Card>
                <CardContent>

                    <Typography variant="h5" component="h2">
                     {event.completionIntent.toUpperCase()}
                    </Typography>

                    <Typography color="textSecondary" gutterBottom>
                    <span><FontAwesomeIcon icon="clock"/></span>
                    </Typography>

                    <Typography component="p">
                    {event.eventTime}
                    <br />
                    </Typography>
                </CardContent>
                <CardActions>
                <Link href={event.audio?"":null} style={{color:event.audio?'#3f51b5':'#bdbdbd', fontSize:'12px',}}
                underline="none"

                >
                    Download Audio
                </Link>

                <Button
                id={event.completionIntent+'Button'}
                buttonRef={node => {
                  this.anchorEl = node;
                }}
                variant="contained"
                onClick={this.handleClickButton}
                aria-describedby={event.completionIntent}
                title="Send"
                style={{backgroundColor:!event.audio && '#3f51b5',color:'#eeeeee',padding:'2px 0px', marginLeft:'14px', }}
                disabled={event.audio}
                >
                Send
               <Send  className={classes.rightIcon}/>
                </Button>

            <Popper
              id={event.completionIntent}
              open={open}
              anchorEl={this.anchorEl}
              placement='bottom'
              disablePortal={false}
              className={classes.popper}
              modifiers={{

                preventOverflow: {
                  enabled: false,
                  boundariesElement:'scrollParent' 
                },
              }}
            >

              <Paper className={classes.paper}>
                <DialogTitle>{"Manual Task Updation"}</DialogTitle>
                <DialogContent>
                  <DialogContentText>
                    Are you sure you want to update {event.completionIntent.toUpperCase()}?
                  </DialogContentText>
                </DialogContent>
                <DialogActions>
                  <Button onClick={this.handleClickButton} color="primary">
                    Disagree
                  </Button>
                  <Button onClick={this.handleClickButton}  color="primary">
                    Agree
                  </Button>
                </DialogActions>
              </Paper>
            </Popper>                    
                </CardActions>

            </Card>

            </div>
            ))}

I want to open the popper only for one card where I clicked the button since open state variable is same for all popper then all popper gets opened. How to make it unique

Upvotes: 2

Views: 1571

Answers (2)

fajrizulfikar
fajrizulfikar

Reputation: 27

It maybe too late, but i hope it will help someone out there.

You can use dom manipulation to do that.

In your button handler, set unique id:

<Button
   ...
   onClick={() => this.handleClickButton(some-unique-id)}
   ...
>
...
</Button>

And then in your popper state:

<Popper
  ...
  open={open[some-unique-id]}
  ...
>
...
</Popper>

And finally change your handler:

handleClickButton = (event,some-unique-id) => {
...
this.setState({
  open: {
      [some-unique-id]: true
  }
});
};

Upvotes: 2

abekonge
abekonge

Reputation: 126

Instead of making unique open values for all possible cards. It would be a better and simpler solution to make the card implementation as a seperate component. Each card would then have its own state, and you would only need one open value to handle the popper, thus seperating concerns.

So move the card into a seperate component, design some props that handles the data you need to pass down from the parent component, something like this:

{
  this.props.events.map((event) =>
           (<MyCustomCardImplementation key={someUniqueProperty {...myCustomCardProps} />) 
}

Upvotes: 0

Related Questions