Turns out when using a map within a React component and returning a list of components you need to wrap the return in () parenthesis as oppose to using the common {} curly brackets.
your imports and function code and useState above...
.....
.....
.....
FIX: NOTE With paratheses ()
return (
<div>
<Card className='expenses'>
<Filter selectedDate={filteredYear}
dateSelectedHandler={onSetFilterHandler}
/>
// NOTE paratheses used here. ( )
{filteredResults.map((expense) => (
<ExpenseItem
key={expense.id}
title={expense.title}
amount={expense.amount}
date={expense.date}
/>
)
)}
</Card>
</div>
)
Below FAILED IMPLEMENTATION:
return (
<div>
<Card className='expenses'>
<Filter selectedDate={filteredYear}
dateSelectedHandler={onSetFilterHandler}
/>
// This code will fail to understand what you are returning
// when using the curly brackets { }
{filteredResults.map((expense) => {
<ExpenseItem
key={expense.id}
title={expense.title}
amount={expense.amount}
date={expense.date}
/>
}
)}
</Card>
</div>
)I found this solution on stackoverflow flow and also verified it in the tutorial I am following.
I have just started learning React framework so i’m going to list and post all the niggles I come across or silly mistakes I made. Good luck and keep learning.
