1

I am just iterating some data from API using arrow function inside render function of react like this.

render() {
  const postItem = this.props.posts.map((post, index) => {
    <div key={post.id}>
      <p>{index}</p>
      <h4>{post.title}</h4>
      <p>{post.body}</p>
    </div>
  })
  return (
    <div>
      <p>Posts</p>
      {postItem}
    </div>
  )
}

then it throws error

(Please look curly braces after arrow, if put "(" inplace of curly braces "{" then every things goes fine)

like "Expected an assignment or function call instead saw an expression", but if I put ( after => then everythings goes fine.

But my doubt is that correct syntax of an arrow is like this () => {}.

Please help me out.

etarhan
  • 4,138
  • 2
  • 15
  • 29
Alok Ranjan
  • 967
  • 10
  • 10

3 Answers3

1

The pair of braces forms a block, containing a list of statements. You need to use a return statement explicitly to make the function return something. If you omit the braces, the arrow function has a concise body, which consists solely of a single expression whose result will implicitly become the return value of the function.

How it helps!!!

Raman Mishra
  • 2,635
  • 2
  • 15
  • 32
1

You are not returning anything. When using an arrow function you have two options here.

1. Concise body

render() {
  const postItem = this.props.posts.map((post, index) => {
    return (
      <div key={post.id}>
        <p>{index}</p>
        <h4>{post.title}</h4>
        <p>{post.body}</p>
      </div>
    )
  })
  return (
    <div>
      <p>Posts</p>
      {postItem}
    </div>
  )
}

2. Block body

render() {
  const postItem = this.props.posts.map((post, index) => {
    return (
      <div key={post.id}>
        <p>{index}</p>
        <h4>{post.title}</h4>
        <p>{post.body}</p>
      </div>
    )
  })
  return (
    <div>
      <p>Posts</p>
      {postItem}
    </div>
  )
}

When you write () => {} you are not returning anything from your expression. This is the so called block body notation, it requires a explicit return statement. When you write () => () you are using a so called concise body, it will work since the return is implicit. You can read more here: Arrow functions: Function body (MDN)

etarhan
  • 4,138
  • 2
  • 15
  • 29
1

In a traditional function declaration, a return statement is needed.

function Foo(bar) {
  // do something..
  return bar
}

When using arrow syntax a return statement is also needed:

const Foo = (bar) => {
  // do something..
  return bar
}

These 2 functions are identical.

Let's consider this example:

const adder = (a, b) => {
  return a + b
}

This function can be reduced down to this:

const adder = (a, b) => a + b

As you can see no {} no return needed. Do consider though, if, through (for example) debugging, you need to add a console.log to the adder function:

const adder = (a, b) =>
  console.log(a) 
  a + b

this will break the function (it will return the console.log ), so an amendment would be needed to revert to previous function structure.

const adder = (a, b) => {
  console.log(a)
  return a + b
}

In answer to the '(' bracket part of your question, let's consider this function, whose purpose it is to return an object {}:

const Foo = bar => {
  return {
    objectProperty: bar
  }
}

Now we want to reduce this down, as per the previous example.

const Foo = bar => { objectProperty: bar }

But this will now break. Because although 'we' want the {} to be our object definition, they are read by the compiler as the function statement {} By wrapping the object in () prevents this action.

const Foo = bar => ({ objectProperty: bar })

This will now correctly return the object.

Rick Brown
  • 21
  • 3