Month: November 2022

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.