CODEWITHSUNDEEP
reactjs
Gleb Krylov
Gleb Krylov

Reputation: 65

Why in some cases in React we use round brackets instead of curly brackets

Here is an example when I saw round brackets instead of curly brackets.

export const Navbar: React.FC = () => (
<nav>
<div className="nav-wrapper purple lighten-1 px1">
  <a href="#" className="brand-logo">React + Typescript</a>
</div>
)

Upvotes: 1

Views: 624

Answers (3)

Sumit Dey
Sumit Dey

Reputation: 149

Learn ES6 Arrow Functions, You will get this

Upvotes: 0

underscore
underscore

Reputation: 6877

  1. When if you need return statement

    export const Navbar: React.FC = () => (

       <>
     {" "}
     // You need to wrap children with parent element
     <nav />
     <div className="nav-wrapper purple lighten-1 px1">
       <a href="#" className="brand-logo">
         React + Typescript
       </a>
     </div>
   </>

 );

Upvotes: 0

I&#39;m Joe Too
I&#39;m Joe Too

Reputation: 5840

Think of the round brackets as a "return" where you're saying, "Go ahead and return this" and the curly brackets as a function body where you're saying, "Let me do some additional processing and then I'll tell you what to return."

These two statements are identical:

export const Navbar: React.FC = () => (
  <nav>
    <div className="nav-wrapper purple lighten-1 px1">
      <a href="#" className="brand-logo">React + Typescript</a>
    </div>
  </nav>
)
export const Navbar: React.FC = () => {
  return (
    <nav>
      <div className="nav-wrapper purple lighten-1 px1">
        <a href="#" className="brand-logo">React + Typescript</a>
      </div>
    </nav>
  )
}

They act the same, but the second one would allow you to add additional code before returning if you needed to do some processing, formatting, or whatever. If you don't, then doing it one way or the other is more a matter of preference.

Upvotes: 2

Related Questions