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?
Do It as you would in js
<div>
{/*
<div/>
*/}
</div>
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>
);
}
{/* <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