Arrow functions and the use of parentheses () or {} or ({})

Question

I cannot understand why in the arrow functions we do not need to wrap the literal of arrow function in the ({}) braces, instead of in this exam

Answer 1

Using ({}) is to destructure the arguments and => () is an implicit return equivalent to => { return ()} and ( only serves to disambiguate between the start of an object and the opening braces of a function body and would generally be used when you have a multiline return value. You could simply avoid using ( and have the NavLink in the same line as the arrow =>

const FilterLink = ({ filter, children }) => ( // <-- implicit return 
  
    {children}
  
)

is equivalent to

const FilterLink = ({ filter, children }) => {
   return (
      
        {children}
      
    )
}

Check this answer for more details on the usage of destructuring in ({ filter, children })