Реагируйте с помощью материального дизайна, как открыть разные диалоги из разных кнопок?

Question

Я использую модуль реагировать MDL, чтобы открыть диалоговое окно от другого нажатия кнопки сетки. Но возвращаю меня с первым диалогом, а не со вторым.

Я хочу решить эту проблему, например, когда я нажму свою первую кнопку сетки, он вернет меня с первым диалоговым окном и его содержимым, а остальные останутся для тех же других сеток.

Любая помощь будет очень благодарна.

React-MDL: https://tleunen.github.io/react-mdl/components/dialog/

MyCode

import React, {Component} from 'react';

import {Grid, Cell, Dialog, DialogTitle, DialogContent, DialogActions, Button, Card, CardTitle, CardText, CardActions} from'react-mdl';

class Blogs extends Component{
    constructor(props) {
        super(props);
        this.state = {activeCards : 0};
        this.handleOpenDialog = this.handleOpenDialog.bind(this);
        this.handleCloseDialog = this.handleCloseDialog.bind(this);
    }

    handleOpenDialog() {
        this.setState({
          openDialog: true
        });
    }

    handleCloseDialog() {
        this.setState({
          openDialog: false
        });
    }

    blogCards(){
        return(
            <Grid className="projects-grid" activeCards ={this.state.activeCards} onChange={(cardId) => this.setState({activeCards: cardId})} ripple>
                {/* Blog 1*/}
                <Card shadow={5} className="cards-grid"  >
                    <CardTitle style={{color:'#fff', height:'176px', background:"url(https://www.bignerdranch.com/assets/img/blog/2017/07/react-logo.png) center/cover"}}>React Project #1</CardTitle>
                    <CardText>
                        Lorem ipsum lorem ipsum
                    </CardText>
                    <CardActions border>
                        <Button colored onClick={this.handleOpenDialog} raised ripple>Read</Button>
                    </CardActions>

                </Card>

                {/* Blog 1*/}
                <Card shadow={5} className="cards-grid"  >
                    <CardTitle style={{color:'#fff', height:'176px', background:"url(https://www.bignerdranch.com/assets/img/blog/2017/07/react-logo.png) center/cover"}}>React Project #1</CardTitle>
                    <CardText>
                        Lorem ipsum lorem ipsum
                    </CardText>
                    <CardActions border>
                        <Button colored onClick={this.handleOpenDialog} raised ripple>Read</Button>
                    </CardActions>

                </Card>

                {this.openCards()}
            </Grid>
        )
    }

    openCards(){
        if(this.state.activeCards === 0){
            return(
                <Grid>
                    <Dialog open={this.state.openDialog}>
                        <DialogTitle>Allow data collection 1?</DialogTitle>
                        <DialogContent>
                            <p>Allowing us to collect data will let us get you the information you want faster.</p>
                        </DialogContent>
                        <DialogActions>

                            <Button type='button' onClick={this.handleCloseDialog}>Close</Button>
                        </DialogActions>

                    </Dialog>
                </Grid>
            )   
        }
        else if (this.state.activeCards === 1){
            return(
                <Grid>
                    <Dialog open={this.state.openDialog}>
                        <DialogTitle>Allow data collection 2?</DialogTitle>
                        <DialogContent>
                            <p>Allowing us to collect data will let us get you the information you want faster.</p>
                        </DialogContent>
                        <DialogActions>

                            <Button type='button' onClick={this.handleCloseDialog}>Close</Button>
                        </DialogActions>

                    </Dialog>
                </Grid>
            )
        }

    }
    render(){
        return(
            <Grid>
                <Cell col={12}>

                    {this.blogCards()}
                </Cell>
            </Grid>
        )
    }
}

export default Blogs;