How to show or hide elements and Components in React
In this tutorial, we are going to learn about different ways to show or hide elements and components in react.
Consider we have this component with two buttons show or hide.
import React,{Component} from 'react'
class App extends Component{
render(){
return(
<div>
<h1>Hello React</h1>
<button>Show</button> <button>Hide</button> </div>
)
}
}
export default App;Now we need to hide or show the h1 element by click those two buttons.
Let’s add a state and event handler functions to our component.
import React,{Component} from 'react'
class App extends Component{
state = {
isActive:false }
handleShow = ()=>{
this.setState({
isActive: true })
}
handleHide = () =>{
this.setState({
isActive: false })
}
render(){
return(
<div>
{this.state.isActive ? <h1>Hello React</h1> : null } <button onClick={this.handleShow}>Show</button>
<button onClick={this.handleHide}>Hide</button>
</div>
)
}
}
export default App;In the above code, we have used the ternary operator {condition? true: false } to show or hide our h1 element, it means we are showing h1 element if isActive property is true otherwise we are showing null(nothing).
Using Logical && Operator
We can also use logical && operator to show or hide elements.
<div>
{this.state.isActive && <h1>Hello React</h1>} <button onClick={this.handleShow}>Show</button>
<button onClick={this.handleHide}>Hide</button>
</div>If isActive property is true the h1 element is rendered on the screen. if the property is false h1 is not rendered on the screen.
Using if/else statement
In the below example, we are using JavaScript if/else statement to show or hide elements.
import React, { Component } from "react";
class App extends Component {
state = {
isActive: false
};
handleShow = () => {
this.setState({
isActive: true
});
};
handleHide = () => {
this.setState({
isActive: false
});
};
render() {
if (this.state.isActive) { return ( <div> <h1>Hello react</h1> <button onClick={this.handleHide}>Hide</button> </div> ); } else { return ( <div> <button onClick={this.handleShow}>Show</button> </div> ); } }
}
export default App;Here we are rendering the elements inside if block, if isActive property is true otherwise we are rendering the elements insideelse block.
Show or hide components
Similarly, we can use the same conditional operators to show or hide components.
Let’s see an example.
import React, { Component } from "react";
class App extends Component {
state = {
isActive: false
};
handleShow = () => {
this.setState({isActive: true});
};
handleHide = () => {
this.setState({isActive: false});
};
render() {
return (
<div>
{this.state.isActive && <h1>Hello react</h1>}
{this.state.isActive ?( <HideButton onClick={this.handleHide}/> ) : ( <ShowButton onClick={this.handleShow}/> )} </div>
)
}
}
export default App;In this example, we are rendering <HideButton> component if isActive property is true.If the property is false we are rendering <ShowButton> component.
- Share:
