CODEWITHSUNDEEP
reactjs
Stephen Clay
Stephen Clay

Reputation: 107

react JSX when to use () and when to use {}

I'm really struggling to understand what's wrong with the syntax in the following react function

    const listItem = (parentId) => {
            var childCategories = categories.filter(category => category.ParentId === parentId)
            return (
                childCategories.map(category => (
                    <ListItem key={category.Id} button>
                        <ListItemText primary={category.Name} />
                    </ListItem>
                    listItem(category.Id) //// it doesn't like this line
                ))
            )
        }

if I take out the line with the comment "//// it doesn't like this line" the function works except of course there is no recursion. I've tried all different combinations of {} and() e.g. {listItem(category.Id)} but it still doesn't work. Any idea what's wrong with the syntax.

Upvotes: 0

Views: 59

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53874

This is a syntax error and not related to React, in return statement you can only return a single expression.

return [[expression]];

What you have written is similar to:

array.map(item => { 
 return (item item) // syntax error
})

So in this case for React, to return a single value you can use React.Fragment:

<>
  <ListItem key={category.Id} button>
    <ListItemText primary={category.Name} />
  </ListItem>
  {listItem(category.Id)}
</>

Upvotes: 5

Related Questions