How to open modal on table row button and access the table data in modal, in AntD Reactjs

Question

I am showing user data in antd table and I have created edit button in table for each row to access each row record. I want to open modal on 'Edit' button click and fetch that respective row data in modal. But not able to as it is giving error:

'showModal' is not defined

Versions:

• "antd": "^4.18.9",
• "axios": "^0.26.0",
• "react": "^17.0.2",
• "react-dom": "^17.0.2",
• "react-router-dom": "^6.2.2"

My data is from- https://jsonplaceholder.typicode.com/users

Below is my code

import React , {useState , useEffect } from 'react'
import Layout, { Header, Content, Footer } from 'antd/lib/layout/layout';
import { Table, Row, Col } from 'antd';
import axios from 'axios';
import 'antd/dist/antd.css';
import { Modal, Button } from 'antd';
import Example from './NewUserForm';


const columns =[
    
    {
        title:'Name',
        dataIndex:'name',
        key:'uname'

    },
    {
        title:'Email',
        dataIndex:'emailss',
        key:'uemail'

    },
    {
        title:'Address',
        dataIndex:'address',
        key:'uaddress'

    },
    {
        title:'Edit User',
        dataIndex:'edit',
        key:'uedit',
        render: (record) =>( <Button type="primary" 
        onClick={showModal}>
            Edit</Button>)
            
    },

];


const UsersList = () =>{
    const [data, setdata] = useState([])

    useEffect(() => {
        getData() }
    , [])

    const getData = async () =>{
        const res = await axios.get(`https://jsonplaceholder.typicode.com/users`)
        
        setdata(  res.data.map(row =>({id:row.id,name:row.name,emailss:row.email,address:row.address.city})) );              
    }

    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
    setIsModalVisible(true);
    };

    const handleOk = () => {
    setIsModalVisible(false);
    };

    const handleCancel = () => {
    setIsModalVisible(false);
    };

    return (
       
        <Layout>
            <Header>Header 1</Header>          
                <Content  style={{padding:50}}>
                    <Row>
                        <Col span={3}/>
                        <Col span={18}>
                            <Table dataSource={data} columns={columns} />
                        </Col>
                        <Col span={3}/>
                    </Row>
                </Content> 
                <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                </Modal>           
           <Footer></Footer> 
        </Layout>
        
        );
        
}

export default UsersList; ```
        
 

Answer 1

Move your column inside Userlist function, to fix- 'showModal' is not defined error

import React , {useState , useEffect } from 'react'
import Layout, { Header, Content, Footer } from 'antd/lib/layout/layout';
import { Table, Row, Col } from 'antd';
import axios from 'axios';
import 'antd/dist/antd.css';
import { Modal, Button } from 'antd';
import Example from './NewUserForm';

const UsersList = () =>{
    const [data, setdata] = useState([])
    
    const columns =[       
    {
        title:'Name',
        dataIndex:'name',
        key:'uname'

    },
    {
        title:'Email',
        dataIndex:'emailss',
        key:'uemail'

    },
    {
        title:'Address',
        dataIndex:'address',
        key:'uaddress'

    },
    {
        title:'Edit User',
        dataIndex:'edit',
        key:'uedit',
        render: (record) =>( <Button type="primary" 
        onClick={showModal}>
            Edit</Button>)
            
    },

];

    useEffect(() => {
        getData() }
    , [])

    const getData = async () =>{
        const res = await axios.get(`https://jsonplaceholder.typicode.com/users`)
        
        setdata(  res.data.map(row =>({id:row.id,name:row.name,emailss:row.email,address:row.address.city})) );              
    }

    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
    setIsModalVisible(true);
    };

    const handleOk = () => {
    setIsModalVisible(false);
    };

    const handleCancel = () => {
    setIsModalVisible(false);
    };

    return (
       
        <Layout>
            <Header>Header 1</Header>          
                <Content  style={{padding:50}}>
                    <Row>
                        <Col span={3}/>
                        <Col span={18}>
                            <Table dataSource={data} columns={columns} />
                        </Col>
                        <Col span={3}/>
                    </Row>
                </Content> 
                <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                </Modal>           
           <Footer></Footer> 
        </Layout>
        
        );
        
}

export default UsersList;

To display data in the modal check the following code

UserList.js

import React , {useState , useEffect } from 'react'
import Layout, { Header, Content, Footer } from 'antd/lib/layout/layout';
import { Table, Row, Col } from 'antd';
import axios from 'axios';
import 'antd/dist/antd.css';
import { Modal, Button } from 'antd';
import Example from './NewUserForm';

const UsersList = () =>{
  const [data, setdata] = useState([]);
  const [modaldata, setmodaldata] = useState([]);

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'uname',
    },
    {
      title: 'Email',
      dataIndex: 'emailss',
      key: 'uemail',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'uaddress',
    },
    {
      title: 'Edit User',
      dataIndex: 'id',
      key: 'id',
      render: (index, record) => (
        <Button type="primary" onClick={() => showModal(record)}>
          Edit
        </Button>
      ),
    },
  ];

  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    const res = await axios.get(`https://jsonplaceholder.typicode.com/users`);
    setdata(
      res.data.map((row) => ({
        id: row.id,
        name: row.name,
        emailss: row.email,
        address: row.address.city,
      }))
    );
  };

  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = (record) => {
    console.log(record);
    setmodaldata(record);
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <Layout>
      <Header>Header 1</Header>
      <Content style={{ padding: 50 }}>
        <Row>
          <Col span={3} />
          <Col span={18}>
            <Table dataSource={data} columns={columns} />
          </Col>
          <Col span={3} />
        </Row>
      </Content>
      <Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>Name: {modaldata.name}</p>
        <p>Email: {modaldata.emailss}</p>
        <p>Address: {modaldata.address}</p>
      </Modal>
      <Footer></Footer>
    </Layout>
  );
};

export default UsersList;