ReactJS - How to use comments?

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.

<div className="dropdown">    {/* whenClicked is a property not an event, per se. */}    <Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button>    <UnorderedList /></div>

You can read more about how comments work in JSX here

Here is another approach that allows you to use // to include comments:

return (  <div>    <div>      {        // Your comment goes in here.      }    </div>    {      // Note that comments using this style must be wrapped in curly braces!    }  </div>);

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.

On the other hand, the following is a valid comment, pulled directly from a working application:

render () {    return <DeleteResourceButton            //confirm            onDelete={this.onDelete.bind(this)}            message="This file will be deleted from the server."           />}

Apparantly, when inside the angle brackets of a JSX element, the // syntax is valid, but the {/**/} is invalid. The following breaks:

render () {    return <DeleteResourceButton            {/*confirm*/}            onDelete={this.onDelete.bind(this)}            message="This file will be deleted from the server."           />}