EN VI

Why is ( ) used instead of curly braces/brackets {} inside Javascript Map function - Reactjs?

Inside map function why is the function defined with ( ) => ( ) instead of ( ) => { }

  {mylist.map((elem, index) => (
            <div key={elem.id}>
              <h2>{elem.title}</h2>
            </div>
          ))}

Solution:

You can leave () out if you put everything in one line:

 {mylist.map((elem, index) => <div key={elem.id}><h2>{elem.title}</h2></div>)}

If you want to return something, but it take several lines, then you have to use ():

{mylist.map((elem, index) => (
    <div key={elem.id}>
        <h2>{elem.title}</h2>
    </div>
))}

Finally, when you want to perform something and THEN return the result, you need to use {}. You still need to care when you return something - if it takes several lines, you have to wrap it with():

{mylist.map((elem, index) => {
    const id = elem.id;
    const title = elem.title;
    return (
        <div key={id}>
            <h2>{title}</h2>
        </div>
    );
})}

For returning objects it's also a bit different: You can wrap your object into brackets: ({...}) or explicitly return it: () => { return { ... }}