How to load webpage content conditionally in React JS

So far, we have seen how to display content on our webpage, but in most modern applications we will have to display contents conditionally. For example, we may need to display different content to different roles of users. An Administrator will be able to see a dashboard for website management and a customer will only be able to see what the administrator wants him to see. Let’s see how we can load or display our HTML content on webpage conditionally.


What will be the output of this :

whenever you click on a button, a paragraph will displayed ‘Hi I am Atul and I am a Developer’. And when you click that button again, that paragraph will be hidden back.


Lets look at the code :

Now that we know how to pass data from state to props to be displayed on our component from previous post. We have created a state named persons. There we have a name stored with name. To access it in App.js we can use name={this.state.persons[0].name}. We send this data to our props as props.name to Persons.js. But, we know this already from our previous posts. To load this HTML element conditionally we will introduce a new state variable named displayName. This will be a boolean variable with an initial value of false. Because when our webpage gets loaded for the first time there shouldn’t be a paragraph. We will use this variable to satisfy our conditions later.
Now if we want to toggle the output of our webpage, based on clicking on the button, we will have to create an event handler to our button named toggleNameHandler. We will get the reference of this event handler like this : onClick={this.toggleNameHandler}.
Now what our event handler does is it takes the value of our state variable displayName and store the opposite of the current value back in displayName.
What we did is simply used the ternary operator to check the value of displayName is true or false. If the value is true then HTML element will get loaded or if the value is false the element will be hidden.
As we know whatever we write in React is JavaScript and not HTML, even if it looks like HTML it is JSX actually. So we created a block by using curly braces to execute this conditional logic of ternary operator.

App.js


Persons.js


The efficient way of conditionally loading content

The Above method of conditionally loading content is not optimal. As our application grows and number of lines gets bigger, the readability will not be good and it will become difficult to debug such applications.

Whenever React triggers the DOM update, everything inside the render() method get executed and not only the return method. So we will take the advantage of this. We will perform our conditional check before the return() method. We will store the result of our conditional check inside a new variable named persons. This persons variable will hold the HTML element we want to display when we click the ‘Switch’ button.
Once we get the value inside persons variable we will fetch it using {persons} in return method below the button element.

So if person variable contains something, it will be displayed on the webpage or it will hold null


App.js


Persons.js