Summary:

• Parentheses (): Implicit return, the value is automatically returned.
• Curly braces {}: Explicit return required, you need to use return inside the function.

The difference between {data.map((item, index) => ())} and {data.map((item, index) => {})} lies in the syntax for returning values in arrow functions.

1. Arrow Function with Parentheses ():

When you use parentheses around the body of the arrow function, it implies an implicit return. This means the value inside the parentheses will be automatically returned.

Example:

{
  data.map((item, index) => <div key={index}>{item.title}</div>);
}

In this case, the JSX <div> is returned implicitly.

2. Arrow Function with Curly Braces {}:

When you use curly braces, you need to use the return keyword to explicitly return a value. Without the return, the function will not return anything.

Example:

{
  data.map((item, index) => {
    return <div key={index}>{item.title}</div>;
  });
}

If you forget the return in a curly-braced function, nothing will be returned:

{
  data.map((item, index) => {
    <div key={index}>{item.title}</div>; // Nothing returned, causes issue
  });
}