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