Saturday, May 16, 2020

ReactJS conditional rendering

ReactJS Conditional Rendering


Conditional Rendering


We can use conditionals to render the React components similar to JavaScript regular conditionals. We may have multiple components available, but we only want to display only one of them depending upon the state of the application.

for example,
function ConditionButton(props)
{
   if(props.nature=="normal")
        {
        return <button class="normal" >normal</button>
        }
   else if(props.nature=="warn")
        {
        return <button class="warn" >warn</button>
        }
  else
        {
        return <button class="danger">Danger</button>
        }
}
ReactDOM.render(<div><ConditionButton nature="normal" /><ConditionButton nature="warn" />
<ConditionButton nature="danger" /></div>,
document.getElementById('root'));

with the following CSS,

.normal
{
  color:blue;
  height:40px;
  width:80px;
  margin:10px;
}
.warn
{
  color:orange;
  height:40px;
  width:80px;
  margin:10px;
}
.danger
{
  color:red;
  height:40px;
  width:80px;
  margin:10px;
}

the result will appear as,



Element variables


We can use variables to store elements and conditionally render a piece of the component while the rest of the output doesn’t change.

Consider the example below, three new components representing different panels and three buttons to select one of them at any point in time,

function NormalPanel(props)
{ 
 
  return <div class="normal"><h2>Everything is normal</h2></div>;

}
function WarnPanel(props)
{
  return <div class="warn"><h2>!!!This is a warning!!!</h2></div>;
  
}
function DangerPanel(props)
{
  
  return <div class="danger"><h2>!!!Danger!!!</h2></div>;
  
}
class Mypanel extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state={type:'normal'};
  }
  getType()
  {
    
    var panel; //Element variable
   var paneltype=this.state.type;
    if (paneltype=='normal')
    {
      panel = <NormalPanel />;
    }
   else if (paneltype=='warn')
   {
      panel = <WarnPanel />;
    }
   else
   {
      panel = <DangerPanel />;
    }
  //return the variable
    return panel;
  }
  updateState(status)
  {
    if(status=='normal')
      {
        this.setState({type:'normal'});
      }
        if(status=='warn')
      {
        this.setState({type:'warn'});
      }
        if(status=='danger')
      {
        this.setState({type:'danger'});
      }
  }
  display(status)
  {
    this.updateState(status);
    return this.getType();
  }
   /**/
  render()
  {  
    
    return <div>{this.getType()}<hr/>
           <button onClick={this.display.bind(this,'normal')}>Normal </button>
           <button onClick={this.display.bind(this,'warn')}>warn </button>
           <button onClick={this.display.bind(this,'danger')}>Danger</button>
           </div>;
  }
}

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

The variable panel is used to store and return the variable element. 

The CSS for the code is,

.normal
{
  border:thin solid blue;
  text-align:center;
  color:blue;
  height:100px;
  width:200px;
}
.warn
{
  border:thin solid orange;
  text-align:center;
  color:orange;
  height:100px;
  width:200px;
}
.danger
{
  border:thin solid red;
  text-align:center;
  color:red;
  height:100px;
  width:200px;
}

The result will appear as,






Conditional Operator


We can render the elements in line with the conditional operator condition ? true : false. For example,

function Panel(props)
{ 
 var a=<h2>Element A</h2>;
  var b=<h2>Element B</h2>;
  return <div>{props.option=="a" ? a : b}</div>;

}
ReactDOM.render(<div><Panel option="a"/></div>,
document.getElementById('root'));