I just launched a new course on ES6! Use the code WESBOS for $10 off.

Strengthen your core JavaScript skills and master all that ES6 has to offer. Start Now →

How to comment in React JSX

How do you comment in JSX? Regular JavaScript comments in JSX get parsed as Text and show up in your app.

Comments in JSX are weird and when searching for information, it’s hard to find a straightforward answer. So here it is:

You can’t just use HTML comments inside of JSX because it thinks they are real DOM Nodes:

render() {
  return (
      <!-- This doesn't work! -->

You’ll need to use JavaScript comments inside of
You can use regular /* Block Comments */, but they need to be wrapped in curly braces:

{/* A JSX comment */}

Same goes for multiline comments:


Kind of a pain, but React devs has stated they do not plan to add regular JS commenting to JSX.

If you use Sublime Text, I’ve created a little snippet so you can just type jc + TAB to get a quick comment. Download it here. To install, PreferencesBrowse Packages → Put snippet in User folder.

I’m still on a hunt for a for a fix to get the comment shortcut working – or even a small package that would toggle them on and off. If anyone is a interesting in working on this (and knows Python) – let me know!

This entry was posted in JavaScript, Sublime Text. Bookmark the permalink.

8 Responses to How to comment in React JSX

  1. Pablo says:

    Nice!!! just wat I needed

  2. Hey Wes, thanks for the snippet 🙂

    I used the scope meta.jsx.js to bind my comment-shortcut to your snippet only in that particular scope. Now it almost feels like the comment-shortcut is properly working in jsx 🙂

    “` Key Bindings – User

    //all other scopes, default comment toggle shortcut
    { “keys”: [“ctrl+shift+7”], “command”: “toggle_comment”, “args”: { “block”: false } },

    //only in meta.jsx.js insert snippet
    { “keys”: [“ctrl+shift+7”], “command”: “insert_snippet”, “args”: {“name”: “Packages/User/Snippets/jsx-comment.sublime-snippet”},

    { “key”: “selector”, “operator”: “equal”, “operand”: “meta.jsx.js”, “match_all”: true }


    Still seems a little complicated and has minor drawbacks:
    – Does not comment the whole line if nothing is selected
    – Is only working after the first opening html element. (since the scope is meta.jsx.js from there)
    – No toggling

  3. Tom says:

    Thanks for this!!

  4. Jesse says:

    found a way to insert the snippets and allow it to wrap a selection, and insert it before having any HTML element:

    “keys”: [“super+forward_slash”],
    “command”: “insert_snippet”,
    “args”: {
    “name”: “Packages/User/Snippets/jsx-comment.sublime-snippet”,
    “block”: true
    “context”: [
    “key”: “selector”,
    “operator”: “equal”,
    “operand”: “meta.jsx.js, meta.group.braces.round.js”,
    “match_all”: true

    and also need to modify the snippets:




Leave a Reply

Your email address will not be published. Required fields are marked *