0

I am taking React classes and it seems I can do:

const Header = () => (
  <div></div>
)

or

const Header = () => {
  return (<div></div>)
}

Notice regular parenthesis in the first syntax, and lack of return keyword. The second syntax is the one I am more familiar with -- it is clearly "the body of the function". But what does the first syntax mean? By the way, its coming from advanced react class by Wes Bos, and its in the context of next.js -- may be that makes a difference?

alernerdev
  • 2,014
  • 3
  • 19
  • 35

2 Answers2

1

You no need to explicitly add return to return elements

const Header = () => (
  <div></div>
)

But here you need to explicitly add return to return elements

const Header = () => {
  return (<div></div>)
}
Hemadri Dasari
  • 32,666
  • 37
  • 119
  • 162
1

()=> mean you direct returning something. So you can write your code like 

const Header = () => <div>something</div>

() after => is not related to function, it is related to jsx.

Also, you can write only a single expression whether you return it or not. Something like following.

let squ = (n) =>  n * n;

let message = () => alert('some message')

Only one exception is you can't return an object like this way. Following code does not work. 

const Header = () => {name: 'some thing', age: 30}

If you like to direct return object you have to wrap the object by (). So this should be 

const Header = () => ({name: 'some thing', age: 30})

Next part of your question () => {” it is pretty similar to normal function and I think your concept is clear here. You need it when you do not directly return anything. Doing some action inside the function or return something after some code.

webHasan
  • 461
  • 3
  • 11