Categories
Uncategorized

Conditional rendering in React.JS

Conditional rendering in React.JS is done after encapsulating all components and then render them using if, else statements. Here is a simple example: 

If user is logged in, render, ‘Welcome back!’ else render, ‘Please sign up!’. We create two functions for it first:

function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}

Now let us create a function which checks if ‘isLoggedIn’ value is ‘true’ then it render ‘UserGreeting(props)’ function, else it render ‘GuestGreeting(props)’ function: 

function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}

In end we render the Greeting(props) function and we can set true and false value for isLoggedIn to true or false in ReactDOM as follows: 

ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);


Now let us display login and logout button with message. It can be done with following code: 

1) First we add above mentioned code:

function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}

function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}

2) Then we create login button function:

function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
}

3) Then we create logout button function:

function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}

4) Then we create class ‘LoginControl’.

A) It has constructor function which do button click bindings and set initial state of ‘isLoggedin’ to false.

class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}

B) Then we create handleLoginClick() function which sets the isLoggedin state to ‘true’.

handleLoginClick() {
this.setState({isLoggedIn: true});
}

C) Similarly we create function, handleLogoutClick() function which sets the isLoggedIn state to ‘false’, when called.

handleLogoutClick() {
this.setState({isLoggedIn: false});
}

D) In render we create buttons and set conditions on them. If it is logged in, then display ‘Logout’ button, else display ‘Login’ button. Then we call ‘Greeting’ function which display messages.

render() {
const isLoggedIn = this.state.isLoggedIn;
let button;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}

return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}

5) When ‘LoginControl’ class is rendered in ReactDOM, initial state of isLoggedIn is set to false in constructor.

ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);


AND Operator (&&): If condition of left of && is ‘true’ then it display element on right of &&, otherwise it skip it. Let us see example: 

1) First we create a function mailbox(). It fetches unreadMessages array from ReactDOM. In return(), we count the array length using unreadMessages.length. If the length is more than 0, then display length value with message:

function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}

2) ReactDOM is fetching unreadMessages from an array named ‘messages’, as shown below:

const messages = ['React', 'Re: React', 'Re:Re: React', 'hi'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);

 

Leave a Reply

Your email address will not be published. Required fields are marked *