diff --git a/lib/rules/jsx-curly-brace-presence.js b/lib/rules/jsx-curly-brace-presence.js
index a4f1dbdc64..40030279b0 100755
--- a/lib/rules/jsx-curly-brace-presence.js
+++ b/lib/rules/jsx-curly-brace-presence.js
@@ -114,26 +114,21 @@ module.exports = {
* @param {ASTNode} JSXExpressionNode - The AST node with an unnecessary JSX expression
*/
function reportUnnecessaryCurly(JSXExpressionNode) {
- const expression = JSXExpressionNode.expression;
- const expressionType = expression.type;
- const parentType = JSXExpressionNode.parent.type;
- const isJSX = jsxUtil.isJSX(expression);
-
- if (parentType === 'JSXAttribute' && isJSX) {
- return;
- }
-
context.report({
node: JSXExpressionNode,
message: 'Curly braces are unnecessary here.',
fix(fixer) {
+ const expression = JSXExpressionNode.expression;
+ const expressionType = expression.type;
+ const parentType = JSXExpressionNode.parent.type;
+
let textToReplace;
if (parentType === 'JSXAttribute') {
textToReplace = `"${expressionType === 'TemplateLiteral' ?
expression.quasis[0].value.raw :
expression.raw.substring(1, expression.raw.length - 1)
}"`;
- } else if (isJSX) {
+ } else if (jsxUtil.isJSX(expression)) {
const sourceCode = context.getSourceCode();
textToReplace = sourceCode.getText(expression);
@@ -244,6 +239,20 @@ module.exports = {
}
function shouldCheckForUnnecessaryCurly(parent, node, config) {
+ // Bail out if the parent is a JSXAttribute & its contents aren't
+ // StringLiteral or TemplateLiteral since e.g
+ // } prop2={...} />
+
+ if (
+ parent.type && parent.type === 'JSXAttribute' &&
+ (node.expression && node.expression.type &&
+ node.expression.type !== 'Literal' &&
+ node.expression.type !== 'StringLiteral' &&
+ node.expression.type !== 'TemplateLiteral')
+ ) {
+ return false;
+ }
+
// If there are adjacent `JsxExpressionContainer` then there is no need,
// to check for unnecessary curly braces.
if (jsxUtil.isJSX(parent) && hasAdjacentJsxExpressionContainers(node, parent.children)) {