Conditional Rendering in React.js - Get React.js Projects Help

In react.js different types of components are made which are rendered according to the need of the website. Many components are rendered conditionally means it depends on the other factors if other factors fulfill the condition then component will render otherwise not. For example if any user is logged in only then he can see logout button otherwise not.

There are different types of conditional rendering. Few of them are below:-

1) if-else

2) ternary operators

3) logical && operator

if-else

function UserSignIn(props) {  
  return <h1>Welcome back!</h1>;  
}  
function GuestSignIn(props) {  
  return <h1>Please sign up.</h1>;  
}  
function SignUp(props) {  
  const isSignIn = props.isSignIn;  
  if (isSignIn) {  
    return <UserSignIn />;  
  }  
  return <GuestSignIn />;  
}  
  
ReactDOM.render(  
  <SignUp isSignIn={false} />,  
  document.getElementById('root')  
);  

Ternary Operator

     render() {  
  const isSignIn = this.state.isSignIn;  
  return (  
    <div>  
      Welcome {isSignIn ? 'Back' : 'Please login first'}.  
    </div>  
  );  
}  

Logical Operator

  render(){
        return (
    <div> 
          {(20>5)&& alert("20 is greater than 5")}
</div>
)}

Are you new to React.js or Just started learning and struggling with react.js project? We have team of react.js developer to help you in react.js project, assignment and for learning react.js at affordable price.

Send your request now