# React Conditional Rendering

## Conditional Rendering in React

Conditional Rendering with `if-else` & **handling logic** within **child** **component**.

{% tabs %}
{% tab title="Conditional.js" %}

```jsx
import React from "react"

// Child Component Handling Logic
function Conditional(props) {
    if (props.isLoading === true){
        return (
        <h1>Plz wait!</h1>
        )
    }else{
        return (
        <h1>Hurray! It's loaded</h1>
        )
    }
    
}

export default Conditional
```

{% endtab %}

{% tab title="App.js" %}

```jsx
import React, {Component} from "react"
import Conditional from "./Conditional"

class App extends Component {
    constructor() {
        super()
        // Initializing State
        this.state = {
            isLoading: true
        }
    }
    
    // Lifecycle Method
    componentDidMount() {
        setTimeout(() => {
            this.setState({
                isLoading: false
            })
        }, 1500)
    }
    
    render() {
        return (
            <div>
                <Conditional isLoading={this.state.isLoading}/>
            </div>
        )
    }
}

export default App

```

{% endtab %}

{% tab title="index.js" %}

```javascript
import React from "react"
import ReactDOM from "react-dom"

import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))

```

{% endtab %}

{% tab title="index.html" %}

```markup
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.pack.js"></script>
    </body>
</html>
```

{% endtab %}
{% endtabs %}

Conditional Rendering with `ternary operator` & **handling logic** within **parent component.**

{% tabs %}
{% tab title="Conditional.js" %}

```jsx
import React from "react"

// Child Component will only Display Contents
function Conditional(props) {
    return (    
        <h1>Hurray! It's loaded</h1>
    ) 
}

export default Conditional
```

{% endtab %}

{% tab title="App.js" %}

```jsx
import React, {Component} from "react"
import Conditional from "./Conditional"

class App extends Component {
    constructor() {
        super()
        // Initializing State
        this.state = {
            isLoading: true
        }
    }
    
    // Lifecycle Method
    componentDidMount() {
        setTimeout(() => {
            this.setState({
                isLoading: false
            })
        }, 1500)
    }
    
    render() {
        // Parent Component will Handle Logic 
        return (
            <div>
                {this.state.isLoading ? <h1>Plz wait!</h1> : <Conditional/>}
            </div>
        )
    }
}

export default App

```

{% endtab %}

{% tab title="index.js" %}

```javascript
import React from "react"
import ReactDOM from "react-dom"

import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))

```

{% endtab %}

{% tab title="index.html" %}

```markup
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.pack.js"></script>
    </body>
</html>
```

{% endtab %}
{% endtabs %}

Conditional Rendering with `short-circuit`  evaluation.

{% tabs %}
{% tab title="App.js" %}

```jsx
import React, {Component} from "react"

class App extends Component {
    constructor() {
        super()
        // Initializing State
        this.state = {
            unreadMessages: [
                "Call your mom!",
                "New spam email available. All links are definitely safe to click."
            ]
        }
    }
    
    render() {
        return (
            // Handle Logic with Short-circuit Operator
            <div>
            {
              this.state.unreadMessages.length > 0 && 
              <h2> You have {this.state.unreadMessages.length} unread messages </h2>  
            }
            </div>
        )
    }
}

export default App

```

{% endtab %}

{% tab title="index.js" %}

```javascript
import React from "react"
import ReactDOM from "react-dom"

import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))

```

{% endtab %}

{% tab title="index.html" %}

```markup
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.pack.js"></script>
    </body>
</html>
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
&#x20;There are different ways of conditional rendering in react.
{% endhint %}

## Conditional Rendering All Together

Conditional rendering with `state`.

```jsx
import React from "react"

/*
Challenge:

Given a stateless functional component:
1. Follow the steps necessary to add state to it,
    // class-based component
    // constructor method
2. Have state keep track of whether the user is logged in or not
    // isLoggedIn: Boolean (true or false)
3. Add a button that logs the user in/out
    // event listener (onClick)
    a. extra challenge - make the button display "log in" if they're not logged in and "log out" if they are
        // Conditional Rendering
4. Display text that says "Logged in" if the user is logged in, or "Logged out" if they're not.
    // Conditional Rendering
*/

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            isLoggedIn: false
        }
        this.handleClick = this.handleClick.bind(this)
    }
    
    handleClick() {
        this.setState(prevState => {
            return {
                isLoggedIn: !prevState.isLoggedIn
            }
        })
    }
    
    render() {   
        let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN"
        let displayText = this.state.isLoggedIn ? "Logged in" : "Logged out"
        return (
            <div>
                <button onClick={this.handleClick}>{buttonText}</button>
                <h1>{displayText}</h1>
            </div>
        )
    }
}

export default App

```
