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, Preferences β†’ Browse 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.

40 Responses to How to comment in React JSX

  1. Connor says:

    Hey thank you for this. Very simple fix and the sublime plugin is great for the community also. Enjoyed your flexbox videos, going to check them out hardcore when bootstrap 4 stable launches

  2. Pablo says:

    Nice!!! just wat I needed

  3. 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

  4. Bill says:


  5. Jack Rimell says:

    The docBlockr package for sublime supports a quick comment solution.

    Just type /* and press enter and it adds the ending comment tag and puts your caret in the correct place.

  6. Tom says:

    Thanks for this!!

  7. Rowland says:

    Thanks Wesbos

  8. NIc says:

    I accedently stumbled on a built in command :

    opt + cmd + /

    Creates a JSX comment with the cursor in the right place,

    maybe it was from a babel package i downloaded for syntax highlighting though.. but its worth giving it a try

  9. 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,”,
    “match_all”: true

    and also need to modify the snippets:




  10. Vyacheslav says:

    Thank you, very helpful!

  11. Tobias says:

    Actually, I can comment with “//Hello” and the {*/ Hello */} gives me an error. So have this been updated lately?

  12. Aramis S. H. Fernandes says:

    Very helpful. Thanks a lot!

  13. If you’re still looking… You can use CTRL+/. Here’s a multiline macro [link 1] bound to the normal comment keys (CTRL+/) [link2]



    • oops, the keybinding to use is here: []

  14. Rane says:

    Thanks. This helped me a lot.

  15. bags says:

    Hello, I think your site might be having browser compatibility issues.

    When I look at your website in Opera, it looks
    fine but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other
    then that, amazing blog!

  16. Thank you, will much useful to me

  17. campina says:

    After looking over a handful of the blog posts on your website, I really like
    your way of blogging. I added it to my bookmark site list and will be checking back
    soon. Take a look at my web site as well and tell me your opinion.

  18. Miguel says:

    nice! thanks

  19. Omar says:

    Thank you!!!!

  20. Kamran khan says:








  21. Kamran khan says:

    Nice Post yara

    Kamal k post karty hain ap
    Wah g wah man gye apko

  22. Xavier Artot says:

    Snippet comment for Vim and UltniSnipet

    snippet rc
    {/* ${1:JSX Comment} */}

  23. Toby says:

    Adding to this, if anyone want to write a comment inside an multiline element literal, you have to do this:

  24. Ann chriss says:


  25. Thanks for your info…! This info is very helpful to us..!

  26. Informative and vey helpfull to me.


  27. Von says:

    you’re truly a good webmaster. The site loading pace
    is incredible. It kind of feels that you are doing any distinctive trick.
    Moreover, The contents are masterwork. you’ve performed a wonderful activity in this subject!

  28. Verla says:

    I have to thank you for the efforts you’ve put in writing this website.
    I’m hoping to check out the same high-grade content from
    you in the future as well. In fact, your creative writing abilities has
    encouraged me to get my own blog now πŸ˜‰

  29. Really helpful information. I think that you spend a lot of time to prepare for this. I found many useful tips and advice while reading this blog.

  30. John says:


  31. Madie says:

    Thanks for your personal marvelous posting! I truly enjoyed reading it, you happen to be a great author.

    I will make sure to bookmark your blog and may come back someday.

    I want to encourage you to ultimately continue your great writing, have a nice weekend!

  32. Ezequiel Arceo May says:

    Thank you so much!

  33. nice information thank you for giving a great stuff.

Leave a Reply

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