const tasks = [
    {
        id: 1,
        text: 'Doctors Appointment',
        day: "Feb 5th at 2:30 pm",
        reminder: true,
    },
    {
        id: 2,
        text: "Meeting at School",
        day: "Feb 6th at 1:30pm",
        reminder: true,
    },
    {
        id: 3,
        text: "Food Shopping",
        day: "Feb 5th at 2:30pm",
        reminder: false,
    },
];

    const Tasks = () => {
    return (
        <>
            {
                
                    tasks.map((task) =>
                        <h3>{task.text}</h3>
                )
            }
        </>
    )
}

export default Tasks;

This is my component. Initially I had curly braces in the arrow function, so it looked like this:

tasks.map((task) => {
                        <h3>{task.text}</h3>
                    }

However, doing so made the text disappear. So I removed these curly braces and suddenly the text appeared.

Why does adding curly braces break this arrow function?

Thanks!

CodePudding user response：

You need return keyword in case you use curly braces in your arrow function.

tasks.map((task) => {
                       return <h3>{task.text}</h3>
                    }
)

CodePudding user response：

Curly braces are used to delimit the function body, therefore you need a return statement for return a value:

tasks.map((task) => {
  return <h3>{task.text}</h3>
})