Home.js

import React, {Component} from 'react';
import Header from './Header';

export default class Home extends Component{
    
    constructor(){
        super();
        this.state={
            message: 'Welcome',
            age: 42,
            prefix: 'Mr.',
            name: 'Garrison'
        }
    }
    
    changeORama = () =>{
         let pre = this.state.prefix;
         if(pre === 'Mr.'){
             this.setState({prefix: 'Mrs.'})
         }else{
             this.setState({prefix: 'Mr.'})
         }
    }
    
    render(){
        let name = 'Butters';
        if( this.state.prefix === 'Mr.'){
            name = 'Wendy';
        }
        return (
            <div className="App">
                <header>
                    <h1>{this.state.message} {name}</h1>
                </header>
                <main>
                    { (name && name==='Wendy' &&
                        <p>Hello class.</p>
                      ) || (
                        <p>Hello students.</p>
                        )
                    }
                    
                    {
                        this.state.message === 'Goodbye' &&
                            <p>It says Welcome</p>
                    }
            
                    <p>My name is {this.state.prefix} {this.state.name}.</p>
                    <button onClick={this.changeORama}>Click Here</button>
                </main>
            </div>
        )
    }
}