How can I comment out some HTML code defined into the return() method of a React component? [duplicate]

Question

I am very new in ReactJS and I am facing this problem: how to comment out some HTML code defined into the render() method?

For example I have a component like this:

import React, {Component} from 'react';

class SearchBar extends Component {

    constructor(props) {
        super(props);

        this.state = { term: '' };

    }

    render() {
        //return <input onChange={this.onInputChange} /> ;
        return (
            <div>
                
                <input onChange={event => this.setState({ term: event.target.value })} />
                Value of the input: {this.state.term}
                
            </div>
        );
    }

    /*
    onInputChange(event) {
        console.log(event.target.value);

    }*/

}

export default SearchBar;

I tried to comment out a section of the html returned by the render() method in this way:

render() {
    //return <input onChange={this.onInputChange} /> ;
    return (
        <div>
            
            <!-- <input onChange={event => this.setState({ term: event.target.value })} /> -->
            <!--Value of the input: {this.state.term} -->

            <p>I want to see only this !!</p>
            
        </div>
    );
}

but it is wrong.

What am I missing? How can I comment out some HTML from here?

Ed Lucas · Accepted Answer · 2022-02-05 21:38:07Z

3

In JSX files you can use block comments inside of curly braces, e.g. {/* My comment */}.

In your case:

render() {
    //return <input onChange={this.onInputChange} /> ;
    return (
        <div>
            
            {/* <input onChange={event => this.setState({ term: event.target.value })} /> */}
            {/*-Value of the input: {this.state.term} */}

            <p>I want to see only this !!</p>
            
        </div>
    );
}

answered Feb 5, 2022 at 21:38

Ed Lucas

7,4544 gold badges40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ernesto · Accepted Answer · 2022-02-05 21:37:13Z

1

Do It as you would in js

<div>
{/*
<div/>

*/}

</div>

answered Feb 5, 2022 at 21:37

Ernesto

4,3461 gold badge17 silver badges30 bronze badges

Comments

navylover · Accepted Answer · 2022-02-05 21:43:26Z

1

 {/* <input onChange={event => this.setState({ term: event.target.value })} /> */}
 {/*-Value of the input: {this.state.term} */}

Inside the render block, we must use the multi-line comments in curly braces {/* */}.

This is a detailed ref

answered Feb 5, 2022 at 21:43

navylover

13.9k5 gold badges33 silver badges44 bronze badges

Collectives™ on Stack Overflow

How can I comment out some HTML code defined into the return() method of a React component? [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related