manageOrders.js

import React, { Component } from 'react';
import './../../App.css';

// import afterSearch from './ManageProduct';
import { Table, Button, Modal, ModalHeader,
	ModalBody, ModalFooter,  Form,
	FormGroup, Label, Input, Col, Collapse,
	CardBlock, Card } from 'reactstrap';
import { Link } from 'react-router-dom';

import {connect} from 'react-redux';
import {fetchOrders, deleteOrder,
		updateOrder} from '../Actions/OrderAction';

import localforage from 'localforage';



class ManageOrders extends Component {
	constructor(props) {
		super(props);

		// this.toggle = this.toggle.bind(this);
		this.state = {
			modal: false,
			order_number: '',
			order_items: [
				{
					order_id: '',
					product_name: '',
					order_price: '',
					order_qty: ''
				}
			],
			order_total: '',
			order_owner: {
				name: '',
				address: '',
				phone_number: ''
			},
			order_status: ''


		};


		this.toggle = this.toggle.bind(this);
		this.state = { collapse: false };
		this.handleOrder = this.handleOrder.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
        this.handleChangeStatus = this.handleChangeStatus.bind(this);

    }

	handleChangeStatus(){

	}

	handleOrder(e){
		let jsondata = e.currentTarget.dataset;
        e.preventDefault()
		console.log(JSON.parse(jsondata.order_items));
		// console.log(JSON.parse(jsondata.order_owner));

	}


    handleDelete(id) {

        localforage.getItem('reduxPersist:Account').then(function (value) {
            let user = JSON.parse(value);
            let store_name = user.user.store_name;

        if (window.confirm('Are you sure you want to delete: ')) {
            this.props.deleteOrder(store_name, id);
        }
   	 }.bind(this))
	}

    toggle() {
        this.setState({
            modal: !this.state.modal
        });
    }

	 componentDidMount(){
		 this.props.fetchOrders();
	}

	render(){


		let orders = this.props.Order.orders.sort((a, b) => {
			return new Date(b.timestamp) - new Date(a.timestamp);
		})
			console.log("these are oders: ", this.props.Order.orders);
		if (orders){
			return (
				<div className="page-content">
					<div className="container-fluid">

						<div>
							<Modal isOpen={this.state.modal}
								   toggle={this.toggle}
								   className={this.props.className}>
								<ModalHeader toggle={this.toggle}>Product Details</ModalHeader>
								<ModalBody>
									<Table responsive hover bordered>
										<thead>
										<tr>
											<th>Product Id</th>
											<th>Product Name</th>
											<th>Quantity</th>
											<th>Unit Price</th>
											<th>Price</th>
											<th>Action</th>
										</tr>
										</thead>
										<tbody>
                                    		<tr>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
											</tr>

										</tbody>
									</Table>
								</ModalBody>
								<ModalFooter>
									<button className="btn-color"
											onClick={this.handleChangeStatus}>Process
									</button>{' '}
									<Button color="secondary"
											onClick={this.toggle}>Cancel
									</Button>
								</ModalFooter>
							</Modal>
						</div>

						<Table className="text-center " responsive bordered hover size="sm">
							<thead className="text-center ">
							<tr>
								<th>Order Number (#)</th>
								<th>Customer</th>
								<th>Products</th>
								<th>Total</th>
								<th>Status</th>
								<th>Action</th>
							</tr>
							</thead>
							<tbody >
								{orders.map((order, id) => {
									return (
										<tr key={id}>
											<td >{order.order_number}</td>
                                            <td >{order.order_owner.name}</td>

											<td >{order.order_items.length}</td>
											<td >{order.order_total}</td>
											<td >{order.order_status}</td>
											<td >
												<div className="btn-group btn-group-xs">
													<button
														className="btn btn-default"
														title="view"
													 	onClick={this.toggle}
														data-order_items={JSON.stringify(order.order_items)}
														data-order_name={JSON.stringify(order.order_owner)}>
														<i className="fa fa-eye-slash"></i></button>

													<a onClick={this.handleDelete}

													   className="btn btn-danger" title="delete">
														<i className="fa fa-times"></i></a>

												</div>
											</td>
										</tr>
									)
								})}
							</tbody>
						</Table>



					</div>
				</div>

			)
		}else {
			return (
				<h6>no orders</h6>
			)
		}

	 }
}





const mapStateToProps = (state) => {
	return {
		Account: state.Account,
		Order: state.Order
	}
};

const mapDispatchToProps = (dispatch) => {
	return {

		fetchOrders: () => {
			dispatch(
				fetchOrders()
			)
		},
		deleteOrder:(storename, id) => {
			dispatch(
				deleteOrder(storename, id)
			)
		}
	}
};

export default connect(mapStateToProps, mapDispatchToProps)(ManageOrders);

this.state = {
orderItems: {},
orderOwner: {},
isOpen: false
};

handleOrder(e){
let jsondata = e.currentTarget.dataset;
let orderItems = JSON.parse(jsondata.order_items),
orderOwner = JSON.parse(jsondata.order_owner);

this.setState({
orderItems,
orderOwner,
isOpen: true
});

e.preventDefault();
}

Now you have the orderItems and orderOwner in the state, you can use them in the table in the modal now by doing this:

this.state.orderItems.map((order) => {
// write your code here
})

this.state.orderItems.map((order, id) => {

{order.product_id}
{order.product_name}
{order.product_qty}
{order.product_price}
{order.product_qty * order.product_price}

})