when click on button, id is always the same - reactjs

Question

I am using the "react-responsive-modal" npm package
Source code is here
If you clone and run 'npm start'
You will see dummy UI like this
header
click me objId: 43
click me objId: 42
click me objId: 41
When I click 43, 42, 41, the console.log always output 41. I expecting it output 43, 42, 41 individually.
Is it something to do with the onclick? Does it need closure with onclick?
Here is the main code
import React, { Component } from 'react';
//import logo from './logo.svg';
//import './App.css';
import Modal from 'react-responsive-modal';
class App extends Component {
constructor(props) {
super(props);
this.state = {
isModelOpen: false
}
}
mydata() {
let arr = [
{
id: 43,
date: "Nov 26, 2018",
},
{
id: 42,
date: "Nov 26, 2018",
},
{
id: 41,
date: "Nov 26, 2018",
},
];
return arr;
}
modalNoButton() {
this.setState({ isModelOpen: false });
}
modalYesButton(objId, date) {
// test
console.log('-- modalYesButton --');
console.log(objId);
console.log(date);
this.setState({isModelOpen: false});
}
onOpenModal() {
this.setState({ isModelOpen: true });
}
onCloseModal() {
this.setState({ isModelOpen: false });
}
createActionHtml(objId, date) {
// test
//console.log('-- createActionHtml --');
//console.log(objId);
let {isModelOpen} = this.state;
let pointerStyle = {
cursor: 'pointer'
};
let bigMarginStyle = {
marginTop: '30px'
}
return (
<div>
<div className='myPointer'>
<a onClick={this.onOpenModal.bind(this)} style={pointerStyle}>click me objId: {objId}</a>
</div>
<Modal open={isModelOpen} onClose={this.onCloseModal.bind(this)}>
<div style={bigMarginStyle}>
popup
</div>
<div className='row'>
<div className='col xs-6'>
<button
onClick={() => {this.modalYesButton(objId, date)}}
>
Yes
</button>
</div>
<div className='col xs-6'>
<button
onClick={this.modalNoButton.bind(this)}
>
No
</button>
</div>
</div>
</Modal>
</div>
);
}
myhistory() {
let arr = this.mydata();
let html = arr.slice(0, 3).map((obj, index) => {
let objId = obj.id;
let date = obj.date;
let actionHtml = this.createActionHtml(objId, date);
return (
<div key={index}>
{actionHtml}
</div>
);
});
return html;
}
render() {
return (
<div className="App">
<header className="App-header">
header
</header>
{this.myhistory()}
</div>
);
}
}
export default App;

Answer 1

The issue is that you're actually rendering three modals on top of one another, one for each item, and the last modal with id 41 is on top. The state isOpenModal is a single boolean that determines if all three modals render or not, but you really want to track which of the three modals is open, so I would replace isOpenModal with openModalId.
Here is a codesandbox that works: https://codesandbox.io/s/j388zzyow3
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Modal from "react-responsive-modal";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
openModalId: null
};
}
mydata() {
let arr = [
{
id: 43,
date: "Nov 26, 2018"
},
{
id: 42,
date: "Nov 26, 2018"
},
{
id: 41,
date: "Nov 26, 2018"
}
];
return arr;
}
modalNoButton() {
this.setState({ openModalId: null });
}
modalYesButton(objId, date) {
// test
console.log("-- modalYesButton --", objId);
this.setState({ openModalId: null });
}
onOpenModal(objId) {
this.setState({ openModalId: objId });
}
onCloseModal() {
this.setState({ openModalId: null });
}
createActionHtml(objId, date) {
// test
// console.log('-- createActionHtml --', objId);
let { isModelOpen } = this.state;
let pointerStyle = {
cursor: "pointer"
};
let bigMarginStyle = {
marginTop: "30px"
};
return (
<div>
<div className="myPointer">
<a onClick={() => this.onOpenModal(objId)} style={pointerStyle}>
click me objId: {objId}
</a>
</div>
<Modal
open={this.state.openModalId === objId}
onClose={this.onCloseModal.bind(this)}
>
<div style={bigMarginStyle}>popup</div>
<div className="row">
<div className="col xs-6">
<button
onClick={() => {
this.modalYesButton(objId, date);
}}
>
Yes
</button>
</div>
<div className="col xs-6">
<button onClick={this.modalNoButton.bind(this)}>No</button>
</div>
</div>
</Modal>
</div>
);
}
myhistory() {
let arr = this.mydata();
let html = arr.slice(0, 3).map((obj, index) => {
let objId = obj.id;
let date = obj.date;
let actionHtml = this.createActionHtml(objId, date);
return <div key={index}>{actionHtml}</div>;
});
return html;
}
render() {
return (
<div className="App">
<header className="App-header">header</header>
{this.myhistory()}
</div>
);
}
}
export default App;
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);