Attempting to map within React returning undefined - reactjs

Question

I have the following Mongoose schema:
const SubmitDebtSchema = new Schema ({
firebaseId: String,
balance: [{
balanceDate: Date,
newBalance: Number
}]
});
This database schema is called in my parent component using the useEffect hook, and passed down as props to my child component.
const fetchDebts = debts.map (debt => {
return (
<IndividualDebtCard key={debt._id}
transactions={debt} />
)
})
I then store the prop in my child component as a variable, and use another useEffect to console the result of this variable upon rendering:
const debts = props.transactions
useEffect(() => {
console.log(debts)
}, [debts])
For reference, this is what an example console log would look like:
balance: Array (2)
0 {_id: "5fea07cd143fd50008ae1ab2", newBalance: 1500, balanceDate: "2020-12-28T16:29:00.391Z"}
1 {_id: "5fea0837b2a0530009f3886f", newBalance: 1115, balanceDate: "2020-12-28T16:30:45.217Z"}
What I then want to do, is map through this variable, pick out each 'newBalance', and 'balanceDate' and render them on my page.
However, I'm getting an undefined error every time I try to load my component...
This is what I've tried so far:
{ debts.map(debt => {
return (
<div className="transaction-history">
<div className="transaction-history-entry">
<p>{debt.balance.balanceDate}</p>
<p>-£{debt.balance.newBalance}</p>
</div>
</div>
)
})}
Can anyone point out where I'm going wrong? I know it'll be something obvious, but can't figure it out.
EDIT: I think the undefined is coming from how I'm attempting to call my 'balanceDate' and 'newBalance' - if I console log what I'm trying to map it's returning undefined.

Answer 1

You need to check for debts to have value. try this:
{
debts.balance && !!debts.balance.length && debts.balance.map((debt, index) => {
return (
<div key={index} className="transaction-history">
<div className="transaction-history-entry">
<p>{debt.balance.balanceDate}</p>
<p>-£{debt.balance.newBalance}</p>
</div>
</div>
);
});
}