React Nested Loop Query - reactjs

Question

I'm new to React and struggling with something that would be very simple with XML/XPath.
I have two array objects. For simplicity sake, I've removed most properties to demonstrate and just set everything as strings...
customerList: Customer[]
export class Customer {
id: string = "";
firstname: string = "";
}
and then a second array object:
orderList: Order[]
export class Order {
id: string = "";
customerid: string = "";
}
Assume that the order.customerid is nullable.
What I want to do is loop through each customer, and check if there are any customers without an order.
What I've tried:
{customers.map((customer) => {
return(
orders.map((order) => {
if(order.customerid == customer.id)
{
order.customerid == customer.id ? <p>customer has order</p> : <p>customer does not have order</p>
}
})
)
)}
I figured I'd set some sort of boolean flag to indicate whether there are any customers without orders, but just wanted to get something functional.

Answer 1

When you use map functions, a new array is created from what's returned in each loop.
i.e.:
const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((i) => i*i);
console.log(newArr)
//Output: [1, 4, 9, 16, 25]
In your case, since you have not defined what to return, it will just return undefined and hence you will get a nested array of undefined values.
In order to implement the functionality you want, I'd do something like this
const newArr = customerList.map((customer) => {
return {
...customer,
customerOrdered: orders.find(order => order.customerid === customer.id)
}
})
It will create a new array of customers indicating whether the customer has placed an order or not

Answer 2

You not mentioned in the question but i assume that you want to render that the customer to screen that this customer don't have any order.
So you have to RETURN it. this is common mistake when people start using React.
But look like you using typescript and use it wrong way. You don't have to create a class. Create a type or interface instead.
There are many way to archive what you want to do, this just one of them that you won't need to create new array or change state format.
interface Customer {
id: string,
name: string,
}
interface Order {
id: string,
customerId: string
}
// Pretend that you pass customer and orders to this component
function Component({customers, orders}) {
return (
{customers.map((customer) => {
let haveOrder = false;
orders.forEach((order) => {
if(order.customerid == customer.id){
haveOrder = true;
}
});
if (haveOrder){
return(
<p>customer has order</p>
)
}else {
return(
<p>customer does not have order</p>
)
}
)}
)