React Ant d Modal Component looping unable to render item data as jsx contents

Question

Hello guys i am using React Js 'Ant design Modal Component' https://ant.design/components/modal/ ,onclick of a button the modal should open and it should show content of each individual user to their respective unique id ,but i am getting same id's on all modal of onclick .please help me out,onclick of button i should get their respective id in the modal.Here is my CodesandboxLink also https://codesandbox.io/s/magical-nash-3h4yk?file=/src/Users.js

import React from "react";
import axios from "axios";
import { Button, Modal } from "antd";
import "antd/dist/antd.css";
import "./Users.css";

class Users extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      usersList: [],
      visible: false,
    };
  }
  componentDidMount() {
    axios.get("/Test.json").then((res) => {
      this.setState({ usersList: res.data.members });
    });
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  render() {
    console.log(this.state.usersList);

    const users = this.state.usersList.map((item) => (
      <div key={item.id} className="users_list">
        <li>{item.real_name}</li>

        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Users Activity"
          visible={this.state.visible}
          onCancel={this.handleCancel}
          footer={null}
        >
          {item.id}
        </Modal>
      </div>
    ));

    return (
      <div>
        <h1 className="user_heading">Users</h1>
        <ul className="users_list_names">{users}</ul>
      </div>
    );
  }
}

export default Users;

Here is my CodesandboxLink https://codesandbox.io/s/magical-nash-3h4yk?file=/src/Users.js

Answer 1

Actually you need to store your current item in separate variable so that you can pass to your model and use it correctly, check codesandbox: https://codesandbox.io/s/awesome-shamir-ots4e?file=/src/Users.js

import React from "react";
import axios from "axios";
import { Button, Modal } from "antd";
import "antd/dist/antd.css";
import "./Users.css";

class Users extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      usersList: [],
      visible: false,
      currentItem: {}
    };
  }
  componentDidMount() {
    axios.get("/Test.json").then(res => {
      this.setState({ usersList: res.data.members });
    });
  }
  showModal = item => {
    this.setState({
      visible: true,
      currentItem: item
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false
    });
  };
  render() {
    console.log(this.state.usersList);

    const users = this.state.usersList.map(item => (
      <div key={item.id} className="users_list">
        <li>{item.real_name}</li>

        <Button type="primary" onClick={() => this.showModal(item)}> {/*pass item here */
          Open Modal
        </Button>
        <Modal
          title="Users Activity"
          visible={this.state.visible}
          onCancel={this.handleCancel}
          footer={null}
        >
          {this.state.currentItem.id}
        </Modal>
      </div>
    ));

    return (
      <div>
        <h1 className="user_heading">Users</h1>
        <ul className="users_list_names">{users}</ul>
      </div>
    );
  }
}

export default Users;