React - 如何将数据传递到 Modal（引导程序）

Question

I'm trying to pass data into Modal (bootstrap) popup and display some data. I have a list of orders with a button 'display info', and every button that i press should display on the popup (Modal) diffrent data.

My question is how should i pass the data to the Modal?

this line <Button variant="primary" onClick={() => {this.handleModal(index)}}> Items info</Button> should trigger the Modal. In the handleModal function it passes the order index. And then i update the index on the setState of the handleModal function. The Modal open but nothing passes to it.

I'm not sure that this is the correct way of doing it. Also the Modal is inside the loop of the filteredOrders, should i move the Modal outside the loop? And if yes, how should i do that and where?

import React, {useState} from 'react';
import './App.scss';
import {createApiClient, Item, Order} from './api';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css'
export type AppState = {
  orders?: Order[],
search: string;
show:boolean;
item?: Item,
order_id: number,
}


const api = createApiClient();

export class App extends React.PureComponent<{}, AppState> {


state: AppState = {
    search: '',
    show:false,
    order_id: 0,
};

searchDebounce: any = null;


async componentDidMount() {
    this.setState({
        orders: await api.getOrders()
    });
}
async getItem(itemID: string){
    this.setState({
        item: await api.getItem(itemID)
    });
}

render() {
    const {orders} = this.state;
    return (
        <main>
            <h1>Orders</h1>
            <header>
                <input type="search" placeholder="Search" onChange={(e) => this.onSearch(e.target.value)}/>
            </header>
            {orders ? <div className='results'>Showing {orders.length} results</div> : null}
            {orders ? this.renderOrders(orders) : <h2>Loading...</h2>}

        </main>
    )
}
handleModal(index: number)
{
    this.setState({
        show:true,
        order_id: index,
    })
}
handleClose () {
    this.setState({show: false})
}
renderOrders = (orders: Order[]) => {

    const filteredOrders = orders
        .filter((order) => (order.customer.name.toLowerCase() + order.id).includes(this.state.search.toLowerCase()));
    const requiredItem = this.state.order_id;
    const modelData = filteredOrders[requiredItem];
    return (
        <div className='orders'>
            {filteredOrders.map((order,index) => (
                <div className={'orderCard'}>
                    <div className={'generalData'}>
                        <h6>{order.id}</h6>
                        <h4>{order.customer.name}</h4>
                        <h5>Order Placed: {new Date(order.createdDate).toLocaleDateString()}</h5>
                    </div>
                    <div className={'fulfillmentData'}>
                        <h4>{order.itemQuantity} Items</h4>
                        <img src={App.getAssetByStatus(order.fulfillmentStatus)}/>
                        {order.fulfillmentStatus !== 'canceled' &&
                        <a href="#" onClick={() => this.ChangeStatus(order)}>Mark
                            as {order.fulfillmentStatus === 'fulfilled' ? 'Not Delivered' : 'Delivered'}</a>

                        }


                    </div>
                    <div className={'extraData'}>

                        <Button variant="primary" onClick={() => {this.handleModal(index)}}> Items info</Button>

                        <Modal show={this.state.show} >

                            {/*{console.log(modelData)}*/}
                            {/*<Modal.Header closeButton>*/}
                            {/* <Modal.Title>Item Info</Modal.Title>*/}
                            {/*</Modal.Header>*/}
                            <Modal.Body>
                              { console.log(modaelData) }
                            </Modal.Body>
                            <Modal.Footer>

                                <Button onClick={() =>{ this.handleClose()}}>
                                    Close
                                </Button>

                            </Modal.Footer>
                        </Modal>
                    </div>
                    <div className={'paymentData'}>
                        <h4>{order.price.formattedTotalPrice}</h4>
                        <img src={App.getAssetByStatus(order.billingInfo.status)}/>
                    </div>
                </div>
            ))}
        </div>
    )
};

}

export default App;

Answer 1

I don't think you need to pass data to the Modal, but rather compose the Modal with the data in the first place. It is currently empty. Then you can continue to hide/show the complete Modal with handleModal .