How to Toggle Element Visibility in React?

Show or Hide Element in React

In a React application, you often need to show or hide elements based on user interaction. Let's explore how to achieve this using native React functionality.

var Search= React.createClass({</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">handleClick: function (event) {
    console.log(this.prop);
},
render: function () {
    return (
        <div className=&quot;date-range&quot;>
            <input type=&quot;submit&quot; value=&quot;Search&quot; onClick={this.handleClick} />
        </div>
    );
}

Copy after login

});

var Results = React.createClass({

render: function () {
    return (
        <div id=&quot;results&quot; className=&quot;search-results&quot;>
            Some Results
        </div>
    );
}

});

React.renderComponent(

, document.body);

In this example:

• Search component renders a button that triggers the handleClick method.
• Results component represents the element we want to toggle.

Toggle Element State

To toggle element visibility, we need to maintain state. In modern versions of React, we can use the useState hook to manage component state:

const Search = () => {<br>  const [showResults, setShowResults] = useState(false)<br>  const handleClick = () => setShowResults(true)<br>  return (</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>
  <input type="submit" value="Search" onClick={handleClick} />
  { showResults ? <Results /> : null }
</div>

Copy after login