如何使用 Reactjs 根据其项目键打开模式对话框

Question

Here I am facing some issue to open the modal dialog based on its item key .

I am creating a bog page where i want to display my blogs and open/ close the modal according to its key . and I want to use pagination as well to display 10 blogs per page. But somehow its taking same data for every modal open.

any suggestion how can i handle this modal open and close?

Thanks..

//blog.js

class Blogs extends Component{
    constructor(props) {
        super(props);
            this.state = {
                modal: false
            };

            this.handleOpenDialog = this.handleOpenDialog.bind(this);
            this.handleCloseDialog = this.handleCloseDialog.bind(this);
        }

    static propTypes = {
        getContact: PropTypes.func.isRequired,
        deleteContact: PropTypes.func.isRequired,
        resume: PropTypes.object.isRequired,
        isAuthenticated: PropTypes.bool,
        auth: PropTypes.object.isRequired,
        loading: PropTypes.object.isRequired
    }

    toggle = () => {
        this.setState({
            modal: !this.state.modal
        });
    }

    handleOpenDialog(id) {
        this.setState({
          openDialog: true,
          justClicked: id

        });
    }

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

    componentDidMount() {
        this.props.getBlog();
    }

    onDeleteBlogClick = (id) => {
        this.props.deleteBlog(id);
    };


  cardDialog(blogs, user){
    return(
        <Grid>

             {blogs.map(({ _id, blog_short_desc, blog_name, blog_desc, blog_image_link, blog_by }) => (
            <Cell col={12}>
                <Dialog open={this.state.openDialog} className="open-dialog">
                    <FABButton onClick={this.handleCloseDialog} className="close-button" mini ripple>
                        <Icon name="close" />
                    </FABButton>
                    <DialogTitle>{blog_short_desc}</DialogTitle>
                    <img className="blogs-contents-image" src={blog_image_link} alt="blogs"/>
                    <h4>{blog_name}</h4>
                    <DialogContent className="dialog-contents">{blog_desc} </DialogContent>

                </Dialog>
            </Cell>
             ))}
        </Grid>
    )

  }

    render(){
        const { blogs, loading} = this.props.resume;
        const { isAuthenticated, user } = this.props.auth;
        return(
            <Container>

            {loading ? (
            <div><Loading/></div>
            ) : (
                <div>
                    { isAuthenticated ? 
                    <Button 
                        color="dark"
                        style={{marginBottom: '2rem'}}
                        onClick={this.toggle}
                    >
                        Add Blog
                    </Button> : <h4 className="mb-3 ml-4"> Please login to manage blog</h4> }
                    {this.cardDialog(blogs, user)}
                    <Grid id="todo">
                    {blogs.map(({ _id, blog_name, blog_by, date }) => (

                    <Cell key={_id} data-id={_id}>   
                    { this.props.isAuthenticated && (user.is_admin === true) ? 
                            <Button className="remove-btn"
                            color="danger"
                            size="sm"
                            onClick= {this.onDeleteBlogClick.bind(this, _id)}>
                                &times;
                            </Button> : null }
                        <Card shadow={5} className="cards-grid">
                            <CardTitle className="card-title-image"></CardTitle>
                            <CardText>
                                <b>{blog_name}</b>
                            </CardText>

                            <CardActions border>
                                <Button onClick={this.handleOpenDialog.bind(this, _id)}>Read</Button>
                                <p style={{ fontStyle:'italic', fontWeight:'bold'}}>By-{blog_by} <span style={{float:'right',}}>{Moment(date).format('Do MMMM YYYY')}</span></p>

                            </CardActions>
                        </Card>
                    </Cell>   
                ))} 
           </Grid>
                </div> 
                )}
            </Container>
        ) 
   }
}

const mapStateToProps = (state) => ({
    resume: state.resume,
    isAuthenticated : state.auth.isAuthenticated,
    auth: state.auth,
    loading: state.apiCallsInProgress > 0
});

export default connect(mapStateToProps, {getBlog, deleteBlog }) (Blogs);

//JSON

[
    {
        "_id": "5e9b895ae3929322e426eba5",
        "blog_short_desc": "Hey tammy",
        "blog_name": "ssfs",
        "blog_desc": "jhjhkj",
        "blog_image_link": "https://www.shutterstock.com/image-photo/studio-shot-lovely-woman-wears-halloween-1523214461",
        "date": "2020-04-18T23:12:26.415Z",
        "__v": 0
    },
    {
        "_id": "5e9b7f3a3e382b0a609409fa",
        "blog_short_desc": "heey siri",
        "blog_name": "sirirrrheyyy siri",
        "blog_desc": "hey siri",
        "blog_image_link": "https://www.shutterstock.com/image-photo/studio-shot-lovely-woman-wears-halloween-1523214461",
        "date": "2020-04-18T22:29:14.850Z",
        "__v": 0
    }
]

//current visual

Answer 1

I think if you change

<Dialog open={this.state.openDialog} className="open-dialog">

to

<Dialog open={this.state.openDialog && this.state.justClicked === _id} className="open-dialog">

It should work.

Currently it's displaying every modal when openDialog is true . You just can't see it as they are layered on the screen.