From f7ea62e49102245bd4149eb103306e4fcabe8822 Mon Sep 17 00:00:00 2001 From: Justin Grant Date: Mon, 23 Jan 2017 09:09:35 -0800 Subject: [PATCH] Reminder: strip quotes from attributes with JS code (#8806) * Reminder: strip quotes from attributes with JS code Web developers who are used to standards-compliant HTML and XML will, out of habit, put quotes around all attributes because the standards require them. Other templating systems like ASP.NET also require (or at least allow) quotes around attributes that contain code. This behavior will get users into trouble in JSX because a quoted attribute is always treated as a string literal, even if it contains curly-braced javascript code. Let's add to the docs to help newbies evade this problem. * Tweak wording --- docs/introducing-jsx.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/introducing-jsx.md b/docs/introducing-jsx.md index 505cdeb1..c896e80c 100644 --- a/docs/introducing-jsx.md +++ b/docs/introducing-jsx.md @@ -79,6 +79,8 @@ You may also use curly braces to embed a JavaScript expression in an attribute: const element = ; ``` +Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. Otherwise JSX will treat the attribute as a string literal rather than an expression. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute. + ### Specifying Children with JSX If a tag is empty, you may close it immediately with `/>`, like XML: