REACT - CONDITIONAL RENDERING

    // APP JS
    //CONDITIONAL RENDERING
    //Load something on the screen if a condition is true

    import React from 'react'
    import Conditional from './components/Conditional'


    class App extends React.Component { 
    constructor(){
        super()
        this.state ={
            isLoading: true
        }
    }

    //Do something before the component is loaded, fake way to pretend that we are having an API call
    //Sends isLoading to the props 3:06
    componentDidMount(){
        setTimeout(() => {
        this.setState({
            isLoading: false
        })
        }, 1500)
    }

    render(){
        return (
            <div>
            {this.state.isLoading ? <h1>Loading...</h1> :
            <Conditional isLoading={this.state.isLoading}/>}
            </div>
        )
    }
    }


    export default App;

    

    // CONDITIONAL.JS<
    import React from 'react'

    function Conditional(props){
        //condition ? statement if true : statement if false
        
        //final version
        return (
                <h1>Some cool stuff about conditional Rendering</h1>
                )
        
        //third version
        // return (
        //     <div>
        //         {props.isLoading ? <h1>Loading...</h1> :  <h1>Some cool stuff about conditional Rendering</h1>}
        //     </div>
        //     )

        //Second version
        // return (props.isLoading === true ? <h1>Loading...</h1> :  <h1>Some cool stuff about conditional Rendering</h1>)

        //Initial version
        // if(props.isLoading === true){
        // return (
        //     <h1>Loading...</h1>
        // )
        // }else {
        //     return (
        //         <h1>Some cool stuff about conditional Rendering</h1>
        //     ) 
        // }
    }

    export default Conditional
        

    // && Method  <
    //CONDITIONAL RENDERING
    //Load something on the screen if a condition is true

    import React from 'react'
    import Conditional from './components/Conditional'


    class App extends React.Component { 
    constructor(){
        super()
        this.state ={
            unreadMessages: [
                "Call your mom",
                "New spam email available. All links are definitely safe to click"
            ]
        }
    }

    //&&
    // True && False
    componentDidMount(){
        setTimeout(() => {
        this.setState({
            isLoading: false
        })
        }, 1500)
    }

    render(){
        return (
            <div>
            {this.state.unreadMessages.length > 0 ? 
            <h2>You have {this.state.unreadMessages.length} unread messages!</h2> :
            null}
            //ANOTHER FORM
            {/* {this.state.unreadMessages.length > 0 && 
            <h2>You have {this.state.unreadMessages.length} unread messages!</h2>} */}


            </div>
        )
    }
    }


    export default App;

    

    // PRACTICE <

    //CONDITIONAL RENDERING
    //Load something on the screen if a condition is true
    import React from 'react'

    class App extends React.Component { 
    constructor(){
        super()
        this.state ={
            isLoggedIn: false
        }
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick(){
        console.log("I'm working")
        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>
            <h2>Status: {displayText}</h2>

            </div>
        )
    }
    }


    export default App;