score:5

Accepted answer

this is a bit long winded, but it should cover everything you need to know. create a greeting component. when this component mounts get the hour and based on the hour you can display a different message to the user.

class greeting extends react.component {
  state = {
    hour: null,
    username: 'alyssa'
  }
  
  componentdidmount() {
    this.gethour()
  }

  gethour = () => {
   const date = new date();
   const hour = date.gethours()
   this.setstate({
      hour
   });
  }

  render(){
    const {hour, username} = this.state;
    return (
      <div classname='app'>
        <h2>{hour < 12 ? "good morning" : "good evening"} {username}</h2>
      </div>
    );
  }

}

const rootelement = document.getelementbyid("root");
reactdom.render(<greeting />, rootelement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>


Related Query

More Query from same tag