Parsing error: Expected corresponding JSX closing tag

The issue

We got this issue when we try to use a component in react.js without the closing of a tag. The issue is self explanatory. The following line raised the issue for us.

{items.map((item, i) => <Card>)}

Parsing error: Expected corresponding JSX closing tag for <Card>

Reason of the issue

When an HTML is parsed by the browser it can adjust those enclosing syntax and renders properly. But when JSX syntax is parsed by react.js it is quite sensitive the enclosing of the tag. It becomes difficult to detect self closing tag unless we explicitly close it.

The solution

We had to close the tag like below:

{items.map((item, i) => <Card/>)}
Share