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."
/>
}