import React from "react"
const Component = () => {
const foo = false
return (
<div> // this has to be a div, changing it to another tag (e.g. <main>) corrects the functionality of closing tag below
{foo && <div>} // does not auto close div here
</div>
)
}
🙁 Actual behavior
When working with JSX (both in TypeScript and JavaScript), the auto-closing functionality for HTML tags does not work as expected within curly braces {}. The closing tag (e.g.,
) is not automatically inserted when opening a tag inside curly braces when the outer or parent element tag is the same.
🙂 Expected behavior
The auto-closing functionality should work for HTML tags within curly braces {} in JSX, just like it does for tags outside of curly braces. When opening a tag (e.g., <div>) within curly braces, the closing tag (e.g., </div>) should be automatically inserted even when parent element tag is the same.
🔎 Search Terms
typescript javascript jsx auto close closing div tag curly brackets braces
🕗 Version & Regression Information
⏯ Playground Link
https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wFgAoCtCAOwGd4BhXSGpG+AXjgAoBKOJwB8cAN4U4kuNXpYIEQXEwoANnSQUJUojACuUGry1SpAHgAmwAG5DjJ+6Mzy4AMhdwL1oQF84Aej84cwgkOjgaCHgUXRgFNBUIdSDrOAALJCI7E1M-Sxs7PgpvIA
💻 Code
🙁 Actual behavior
When working with JSX (both in TypeScript and JavaScript), the auto-closing functionality for HTML tags does not work as expected within curly braces {}. The closing tag (e.g.,
🙂 Expected behavior
The auto-closing functionality should work for HTML tags within curly braces {} in JSX, just like it does for tags outside of curly braces. When opening a tag (e.g.,
<div>
) within curly braces, the closing tag (e.g.,</div>
) should be automatically inserted even when parent element tag is the same.Additional information about the issue
No response