单击按钮时如何获取我想要的 select 数据（React JS）

Question

i have this example data, when i click button show more it will show popup (using Modal reactbootstrap) and i will show more detail like ID,Name,Age,City,Number,Address,Education and many more.. how i can select and get all data in popup only when i click button 'show more'

and this my code

            import React from "react";
            import MUIDataTable from "mui-datatables";
            import axios from "axios";
            import { Modal, Button } from "react-bootstrap";

            class App extends React.Component {
              constructor(props) {
              super(props);
              this.state = {
              data: [],
              errors: null,
              isLoading: true,
              };
            }


            get = async () => {
              const option = {
              url: "/api/url",
              method: 'POST',
               headers: {
               "Access-Control-Allow-Origin": "*"
              },
              data: {
                "data": {
                "data": "........."
                },
                "encrypt": 0
              }
              };

              axios(option)
             .then(response => {
                   const tableData = response.data.data.map(post => {
                const {ID,Name,Age,City,Number,Address,Education} = post;
                
                const Popup = () => {
                  const [lgShow, setLgShow] = React.useState(false);
                  const [isOpen, setIsOpen] = React.useState(false);
                
                const showModal = () => {
                  setIsOpen(true);
                };

                const hideModal1 = () => {
                  setIsOpen1(false);
                };
                  return (
                  <div>
                    <Button onClick={() => setLgShow(true)}>Show more</Button>
                    <Modal
                    size="lg"
                    show={lgShow}
                    onHide={() => setLgShow(false)}
                    aria-labelledby="example-modal-sizes-title-lg"
                    >
                    <Modal.Header closeButton class="modal-dialog modal-lg">
                      <Modal.Title id="example-modal-sizes-title-lg">
                      Data {nama_loket}
                      </Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                    
                    Detail<br/>
                    
                        <div><b> ID</b></div><br />
                        <div>{ID}</div><br />
                        
                      
                        <div><b>Name</b></div><br />
                        <div >{Name}</div><br />
                      
                      
                        <div><b>Age</b></div><br />
                        <div>{Age}</div><br />
                        
                        <div><b>City</b></div><br />
                        <div>{City}</div><br />
                        
                        <div><b>Number</b></div><br />
                        <div>{Number}</div><br />
                        
                        <div><b>Adress</b></div><br />
                        <div>{Address}</div><br />
                        
                        <div><b>Educaton</b></div><br />
                        <div>{Education}</div><br />
                        
                </Modal.Body>
                </Modal>

                     

                  </div>
                  );
                };


                return [
                  [ID],
                  [Name],
                  [Age],
                  [City],
                  [Number],
                  <Popup></Popup>
              ];
            });
            this.setState({
            data: tableData,
            isLoading: false
            });
            console.log(response.data.data);
            console.log(this.state.data)
            })

            // If we catch any errors connecting, let's update accordingly
            .catch(error => {
              console.log(error.response);
              this.setState({ error, isLoading: false })
            }
            );
            }

            componentDidMount() {
            this.get();
            }


            render() {
            const { isLoading} = this.state;
            const columns = ["ID", "Name", "Age", "City", "Phone Number",""];

            const options = {
              filterType: "dropdown",
              responsive: "scroll",
              selectableRows:false,
            };

            return (
              <div>
              
              {!isLoading ? (
                    <MUIDataTable
                    data={this.state.data}
                    columns={columns}
                    options={options} 
                  />)
                : (
                  <p>Loading...</p>
                )}
                  </div>
                  );

                }
            }

            export default App

how i get data in my popup when i click. example i have 5 row, when i click second row, data will selected and get is only the second data in second row.. can anyone help me?

Answer 1

You can do this by saving the row clicked in the state and then using the state to show it on the modal, just like you are doing to show your modal.

<Button
  onClick={() => {
    setLgShow(true)
    setSelectedPost(post)
  }}
>
  Show more
</Button>

The idea is to have one button for each post, but you don't need to render the Modal more than once, so render the Modal outside of the response.data.data.map and use the state saved on the selectedPost to show the data inside the Modal.

Answer 2

I think it's better to create the table manually using css https://www.w3schools.com/css/css_table.asp

And for the rows just use React mapping https://reactjs.org/docs/lists-and-keys.html

Then create a button inside your mapping that call a function to open the modal.

Create a new state called displayedData to store the row that you want to display. Inside your render:

{data.map((value, index) => { 
    <tr key={index}> 
        <td>{value.id}</td> 
        <td>{value.name}</td> 
         . . .
        <td>{value.phone}</td>
        <td> <button onClick={()=> this.OpenData(value)}>Show More</button> </td> 
    </tr> 
})}

and for the OpenData function:

async OpenData(value){
   await this.setState({displayedData : value})
   this.openModal()
}

Last, just use displayedData state to display your data inside the modal.

edit:

Also, move your modal from your axios fetch, just create its own function. use your axios fetch just to update your data state