Conditional rendering in React JS day#8

Hello, guys welcome back today. In the previous article, we see how to access the DOM in react. In this, we going to see the conditional rendering in react.

We are almost finished our game the thing we need to do is

  1. Showing the weapons only if the player registers.
  2. Add Logic to find the winner of the game.

In this article, we will see how to show the weapons only if the player registers. In the next article, we will see Add Logic to find the winner of the game.

  1. Introduction to react js
  2. Hello world in React JS day#1
  3. Components in React JS day#2
  4. Add style to components in React JS day#3
  5. State in React JS day#4  
  6. Props in React day#5
  7. Handling events in React JS day#6
  8. Accessing DOM elements in React JS day#7
  9. Conditional rendering in React JS day#8
  10. Adding logic to the game part-1 day#9
  11. Adding logic to the game part-2 day#10

What is Conditional Rendering

Conditional Rendering is used when we want to render some element only if specific conditions match.

Let’s understand by example.

Take our Register component in the Register component we only need to render the Player component. Only if the player is registered.

There are mainly 3 ways to Conditional render the element.

1.Ifelse

By using if-else is so simple simply check the conditional in if statement if it matches render the specific element else render the other element.

Example

render()
{
 if(some condtion)
 {
    return (<React element1/>);
 }
 else
 {
   return (<React element2/>);
 }
}

2.Using variable to store the React element

We can use if-else directly the element is a simple one but if the element is big and complex. One means uses the variable to store the React element and check the Condition and return the corresponding variable else return the other variable.

Example:

render()
{
  let element1=(<React element1/>...);
  let element2=(<React element2/>...);

  if(some condtion)
  {
    return element1;
  }
  else
  {
    return element2;
  }
}

3.Using the ternary operator

Ternary operator very uses full when we want to use conditional rendering for a very small element.

Example

render()
{
   return this.state.player ? <React element1> :<React element2>
}

This say render the <React element1> if this.state.player is not undefined else render the <React elemen2>.

For our game, we going to use the second method.

so let’s see the code for our game.

Register.js

import React  from 'react';
import "./Register.css";

//we importing the player component 
import Player from "./Player.js";

class Register extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state={player_name:""};
    this.inputref=React.createRef();
    this.setPlayer=this.setPlayer.bind(this);
  }
  setPlayer(event)
  {

     let name=this.inputref.current.value
    if(name)
    {
      this.setState({player_name:name});
   
    }
  }

  render() {
        //variable used to store the element
        var msg,info_text;
        
        //if player name is definied show the battle filed only
        if(this.state.player_name)
        {
          msg=<Player player_name={this.state.player_name}/>
        }
        
        //if player is not registerd show the register option
        else
 	{
          msg=(<div><input type="text" placeholder="Enter the player name.." className="player_name" ref={this.inputref}/>
            <input type="button" value="Register" className="reg_button" onClick={(e)=>{this.setPlayer(e)}}/>
            </div>)
          
          //to show the player information
          info_text=(<div className="info_text"> <p>please register to play</p> </div>)
        }
        return(
          <div>
     	     <div className="register_container">		 						 				
   		{msg}
    	     </div>

             {info_text}
     	  </div>
     	     );
     	}
 
 }

export default Register;

We updated our CSS.

Register.css

.register_container
{
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.player_name
{
    height: 30px;
    border: 0;
    outline: none;
    border-bottom: 1px solid;
    background:#3bff41;
}
.reg_button
{
  background-color: yellow; 
  border-radius: 10px;
  border:0;
  outline: none;
  margin-left: 15px;
  width: 85px;
  height: 30px;
}
.info_text
{
  display: flex;
  justify-content: center;
  color: red;
  width: 88%;
  text-align: center;
  font-size: 1.4rem;
  font-style: italic;
  font-weight: bold;
}
/* media query for tablet phones */
@media (max-width:652px)
{
.player_name
{
  width: 89%;
}
.reg_button
{
  margin-top: 10px;
}
.info_text
{
  font-size: 1rem;
  width: 100%;
}
}

 

We render the weapon only if the player register else we simply render the register component.

Save the code, run it and enter the player name next click the register button you will see the output similar as below.

Conclusion

Ok guys that’s enough for today. We learn about conditional rendering in react in this article. Next article we learn about how to apply logic to our game.

All the best guys for upcoming days keep learning.

Leave a Reply

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