Use on parenthesis () or use curly brackets {} in react component

Question

I'm testing a react component, but have problems using an array map where is define an anonymous arrow function, and after arrow (=>) I use curly brackets. Then the inside code could not be executed. The code call to other component called Star that use react icons to draw a star using FaStar. Any way, I had to change the curly brackets for parenthesis and work with out problems.

Basically, my question what is the difference to use curly brackets or use parenthesis, with map and an arrow anonymous function?. When could be used parenthesis or curly brackets?

thanks for your help. Best Reagrds

This is the code not working (using curly brackets after the map's anonymous function)

import React from 'react'
import { useState } from 'react'
import Star from './Star'

const StarRating = ({totalStars}) => {

  const [selectedStars, setSelectedStars] = useState(0)
  const starArray = arrayLenght => [...Array(arrayLenght)]
  console.log("totalStarts", totalStars)

  return (
    <>
      {starArray(totalStars).map((n, i) => {
        <Star
          key={i}
          selected={selectedStars > i}
          onSelect={() => setSelectedStars(i + 1)}
         />
      })}
    </>
  )
}

export default StarRating

This code works fine (using parenthesis after the map's anonymous function)

import React from 'react'
import { useState } from 'react'
import Star from './Star'

const StarRating = ({totalStars}) => {

  const [selectedStars, setSelectedStars] = useState(0)
  const starArray = arrayLenght => [...Array(arrayLenght)]
  console.log("totalStarts", totalStars)

  return (
    <>
      {starArray(totalStars).map((n, i) => (
        <Star
          key={i}
          selected={selectedStars > i}
          onSelect={() => setSelectedStars(i + 1)}
         />
      ))}
    </>
  )
}

export default StarRating

I suggest searching the site: [1](https://stackoverflow.com/questions/28889450/when-should-i-use-a-return-statement-in-es6-arrow-functions), [2](https://stackoverflow.com/questions/39629962/arrow-function-without-curly-braces), [3](https://stackoverflow.com/questions/35440265/curly-brackets-in-arrow-functions). Please read through all of these threads thoroughly before claiming it's not a duplicate. Thanks. — ggorlen, Apr 21 '23 at 00:28
Does this answer your question? [Arrow function without curly braces](https://stackoverflow.com/questions/39629962/arrow-function-without-curly-braces) — ggorlen, Apr 21 '23 at 00:28

score 1 · Accepted Answer · answered Apr 21 '23 at 00:03

The difference is related to the braces. Without the braces a return is implicit while with the braces, you'll need to do an explicit return.

This below

   <>
      {starArray(totalStars).map((n, i) => {
        <Star
          key={i}
          selected={selectedStars > i}
          onSelect={() => setSelectedStars(i + 1)}
         />
      })}
    </>

Would be changed to this.

   <>
      {starArray(totalStars).map((n, i) => {
        return <Star
          key={i}
          selected={selectedStars > i}
          onSelect={() => setSelectedStars(i + 1)}
         />
      })}
    </>

Many thanks noted and understood. right now have problems to undestand the braces and return. Thanks — Dave, Apr 21 '23 at 00:28

Use on parenthesis () or use curly brackets {} in react component

1 Answers1