How to add comments to render jsx in React


Comments are useful piece of text in the code about lines of code, and ignored by interpreter of an application. These will not be displayed by user.

React is a UI framework with reusable components.

Components can be written using jsx or tsx language and CSS

Comments in React JSX

JSX is a special syntax with using mix of JavaScript and html. Render method is written with jsx syntax. However, HTML syntax and javascript syntax will not work.

Javascript comments can be used in constructor or callback methods(componentDidMount etc.) or any function method.

if JSX uses javascript comments, It will displayed on browser.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class First extends Component {
    constructor(props) {
        super(props);
        //constructor comments

    }

    componentWillMount() {

    }

    componentDidMount() {
    //constructor comments
    }

    componentWillReceiveProps(nextProps) {

    }

    shouldComponentUpdate(nextProps, nextState) {

    }

    componentWillUpdate(nextProps, nextState) {

    }

    componentDidUpdate(prevProps, prevState) {

    }

    componentWillUnmount() {

    }

    render() {
        return (
            <div>
                /* This is multi comments text */
                // Single line comments
                First component
            </div>
        );
    }
}

First.propTypes = {

};

export default First;

Displayed on browser: How to add comments to react jsx render method

So there is a special syntax for adding comments to jsx

Syntax:

{
    // javascript syntx expression 
    /** this is multi line comments ofsyntax
}

or

{
    // this is single line of syntax
}

That’s how javascript comments wrapper inside {}.

Important points jsx comments in react application

  • JavaScript comments are wrapped inside a parenthesis {}.
  • Single line comments can be included with closing parenthesis } in new line
  • comments not displayed in browser page as well as source code
  • special syntax {} applied the code inside an sinle element of return of render method
  • In render method outside element, you can use normal javascript syntax style

You can check comments usage example below

render() {
        /* multi line  valid comments  */
        // single line valid comments
        return (
            /* multi line  valid comments */
            // single line valid comments
            <div>
                {/* This is multi comments special syntax
                line2
                 */}
                {// Single line special syntax comments
                }
                    First component
            </div>
        );
    }
}

Invalid comments in jsx

Below are invalid comments declaration

  render() {
        return (
            <div>
                // single line invalid comments
                /* multi line invalid comments
                {// Single line invalid comments}
                    First component
            </div>
        );
    }

This will throws an react error by compiler - Unexpected token, expected }

Wrapped up

Comments can also be included in react JSX with special syntax.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.