How to handle two api calls in react-typescript ant-design - antd

Question

interface SingleCustomerShipmentData {
_id: string;
shipping_type: string;
origin_port_city: string;
destination_port_city: string;
shipment_pickup_date: string;
}
interface SingleCustomerData {
id: string;
first_name: string;
last_name: string;
email: string;
phone: string;
Avatar: string;
}
const columns: ColumnsType<SingleCustomerShipmentData> = [
{
title: 'Shipment Type',
dataIndex: 'shipping_type',
key: 'shipping_type',
render: (shipping_type, data) => {
return (
<div>
<img className='customers-avatar' src={data.Avatar} alt="" />
{shipping_type}
</div>
)
},
},
{
title: 'Origin',
dataIndex: 'origin_port_city',
key: 'origin_port_city',
},
{
title: 'Destination',
dataIndex: 'destination_port_city',
key: 'destination_port_city',
},
{
title: 'Shipment Date',
dataIndex: 'shipment_pickup_date',
key: 'shipment_pickup_date',
},
{
title: 'Shipping ID',
dataIndex: '_id',
key: '_id',
},
{
title: '',
key: 'action',
render: () => {
return (
<Space size="middle"
<Link to="/shipment-details" className='space-action-green'>View Details</Link>
</Space>
)
},
},
];
const Shipments: React.FC = () => {
const [shipmentData, setShipmentData] = useState(null);
const [customersData, setCustomersData] = useState(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
getSingleCustomer()
}, [])
useEffect(() => {
getSingleCustomerShipment()
}, [])
const getSingleCustomer = () => {
setLoading(true);
return makeAPICall({
path: `get_single_customer/123456789`,
method: "GET",
})
.then((data) => {
setCustomersData(data);
setLoading(false);
console.log(data);
})
.catch((err) => {
setLoading(false);
console.log(err);
});
}
const getSingleCustomerShipment = () => {
setLoading(true);
return makeAPICall({
path: `get_single_customer_shipments/123456789`,
method: "GET"
}).then((data) => {
setShipmentData(data);
console.log(data);
}).catch((err) => {
setLoading(false);
console.log(err);
})
}
return (
<SiderLayout>
<div className="site-layout-background" style={{ padding: "40px 40px", minHeight: 710 }}>
<Link className='shipment-back' to="/">
<img src={ArrowLeft} alt="" />
</Link>
{loading ? "loading..." : (
<>
<div className='shipment__container'>
<div className='shipment__container--image'>
<img src={data.Avatar} alt="" style={{ marginRight: 10 }} />
<div>
<p className='bold'>{first_name}</p>
<p>{email}</p>
<p>{phone}</p>
</div>
</div>
<div>
<span className='shipment__container--edit'>Edit</span>
</div>
</div>
<div className='shipment__border'>
<div className='shipment-spacing'>
<button className='new-shipment'>Add New Shipment {" "} +</button>
<select className='shipment-select' name="" id="">
<option value="">Shipment Type</option>
</select>
<select className='shipment-select' name="" id="">
<option value="">Shipment Date</option>
</select>
</div>
<div className='shipment-search'>
<form className="nosubmit">
<input className="nosubmit" type="search" placeholder="Search by shipment ID, Destination" />
</form>
</div>
</div>
<Table columns={columns} dataSource={data} />
</>
)}
</div>
</SiderLayout>
So I'm having these two api calls to be made on the same page. However I created two interface because both would definitely be needed on the it. But I don't really know how I can achieve that, because it is given an error message cannot find name data. So I brought it here for any person with an idea of it to help me out.

Answer 1

const [shipmentData, setShipmentData] = useState(null);
const [customersData, setCustomersData] = useState(null);
these shouldn't start as a null value. Because AntD Table requires an array to render.
const [shipmentData, setShipmentData] = useState([]);
const [customersData, setCustomersData] = useState([]);
should solve the problem you are facing.