ReactJS - How to use comments

Question

How can I use comments inside the render method in a React component   I have the following component    use strict    var React   require  react       Button   require    button       UnorderedList   require    unordered-list     class Dropdown extends React Component    constructor props        super props         handleClick         alert  I am click here           render         return          lt div className  dropdown  gt             whenClicked is a property not an event  per se           lt Button whenClicked  this handleClick  className  btn-default  title  this props title  subTitleClassName  caret  gt  lt  Button gt           lt UnorderedList   gt         lt  div gt               module exports   Dropdown        My comments are showing up in the UI   What would be the right approach to apply single and multiple line comments inside a render method of a component

User · Answer

JavaScript comments in JSX get parsed as Text and show up in your app.

You can’t just use HTML comments inside of JSX because it treats them as DOM Nodes:

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

JSX comments for single line and multiline comments follows the convention

Single line comment:

{/* A JSX comment */}

Multiline comments:

{/* 
  Multi
  line
  comment
*/}

User · Answer

Besides the other answers  it s also possible to use single line comments just before and after the JSX begines or ends  Here is a complete summary   Valid         this is a valid comment    lt div gt             lt  div gt       this is also a valid comment      this is also valid        If we were to use comments inside the JSX rendering logic        lt div gt           lt h1 gt Valid comment lt  h1 gt         lt  div gt      When declaring props single line comments can be used        lt div     className  content     valid comment        onClick       gt         valid comment    gt             lt  div gt      Invalid  When using single line or multiline comments inside the JSX without wrapping them in      the comment will be rendered to the UI        lt div gt         invalid comment  renders in the UI    lt  div gt

User · Answer

To summarize  JSX doesn t support comments  either html-like or js-like    lt div gt         This will be rendered as text           as well as this      lt  -- While this will cause compilation failure -- gt   lt  div gt    and the only way to add comments  in  JSX is actually to escape into JS and comment in there    lt div gt          This won t be rendered             just be sure that your closing bracket is out of comment        lt  div gt    if you don t want to make some nonsense like   lt div style   display  none    gt      actually  there are other stupid ways to add  comments      but cluttering your DOM is not a good idea  lt  div gt    Finally  if you do want to create a comment node via React  you have to go much fancier  check out this answer

User · Answer

any valid js expression     If you wonder why does it work   it s because everything that s inside curly braces     is a javascript expression   so this is fine as well                  yet another js expression

User · Answer

Here is another approach that allows you to use    to include comments   return      lt div gt       lt div gt                     Your comment goes in here               lt  div gt                 Note that comments using this style must be wrapped in curly braces           lt  div gt       The catch here is you cannot include a one-line comment using this approach  For example  this does not work       your comment cannot be like this    because the closing bracket   is considered to be part of the comment and is thus ignored  which throws an error

User · Answer

On the other hand  the following is a valid comment  pulled directly from a working application   render          return  lt DeleteResourceButton               confirm             onDelete  this onDelete bind this               message  This file will be deleted from the server                gt      Apparantly  when inside the angle brackets of a JSX element  the    syntax is valid  but the        is invalid   The following breaks   render          return  lt DeleteResourceButton                confirm                onDelete  this onDelete bind this               message  This file will be deleted from the server                gt

User · Answer

According to React s Documentation  you can write comments in JSX like so   One-line Comment    lt div gt        Comment goes here       Hello   name    lt  div gt    Multi-line Comments    lt div gt        It also works    for multi-line comments        Hello   name     lt  div gt

User · Answer

Two Ways to Add Comments in React Native  1      Double Forward Slash  is used to comment only single line in react native code but it can only be used outside of the render block  If you want to comment in render block where we use JSX you need to use the 2nd method   2  If you want to comment something in JSX you need to use JavaScript comments inside of Curly braces like   comment here    It is a regular    Block Comments     but need to be wrapped in curly braces   shortcut keys for    Block Comments      Ctrl     on Windows   Linux    Cmd     on macOS

User · Answer

JSX Comments Syntax  You can use           your comment    in multiple lines   for documentation          or          your comment    in multiple lines        for multiple lines comment  And also          your comment       for single line comment      Note  The syntax        your comment          doesn t work  You need to type braces in new lines    Curly braces are used to distinguish between JSX and JavaScript in a React component  Inside curly braces  we use JavaScript comment syntax   Reference  click here

User · Answer

x000D   x000D      x000D      lt Header   gt  x000D      lt Content   gt  x000D      lt MapList   gt  x000D      lt HelloWorld   gt  x000D      x000D   x000D   x000D

User · Answer

So within the render method comments are allowed but in order to use them within JSX  you have to wrap them in braces and use multi-line style comments    lt div className  dropdown  gt          whenClicked is a property not an event  per se           lt Button whenClicked  this handleClick  className  btn-default  title  this props title  subTitleClassName  caret  gt  lt  Button gt       lt UnorderedList   gt   lt  div gt    You can read more about how comments work in JSX here

User · Answer

According to the official site  These are the two ways   lt div gt        Comment goes here       Hello   name    lt  div gt    Second Example    lt div gt          It also works      for multi-line comments          Hello   name     lt  div gt    Here is the link  https   reactjs org docs faq-build html how-can-i-write-comments-in-jsx

User · Answer

This is how      Valid          render        return        lt p gt             This is a comment  one line                 This is a block             yoohoo                                     This is a block           yoohoo                                        lt  p gt                  Invalid        render        return        lt p gt             This is not a comment  oops                        Invalid comment                 lt  p gt

[reactjs] ReactJS - How to use comments?

Examples related to reactjs

Examples related to react-native