Adding a greeting to a React App based on the time of day

I’m just starting out with React and I am trying to implement a greeting in which the user gets a different greeting based on the time of day. I’m familiar with the JavaScript function to do this, I’m just not sure how to directly insert it into my code. This is my navbar component that I have so far in React.

import React, { Component } from 'react'
import { Dropdown, Menu, Item, Image, Grid} from 'semantic-ui-react'

const userName = {
  username: 'Alyssa'
}

class NavBar extends Component {
  state = {
    activeItem: 'sites',
  }

  handleItemClick = (e, { name }) => this.setState({
    activeItem: name
  })


  render() {
    const {activeItem} = this.state;
    return (
      <div>
        <Menu inverted vertical>
        <Item>
          <Image size="tiny" centered src="https://s3.amazonaws.com/whatif-assets-cdn/images/what_ifcolonizer.png"></Image>
        </Item>
        <Grid columns={2} divided>
          <Grid.Row>
              <Grid.Column>
                <Item>
                  <Image size="tiny" circular src="https://randomuser.me/api/portraits/men/20.jpg"/>
                </Item>
              </Grid.Column>
              <Grid.Column>
                <Item>
                  <Item.Description>
                    Hello, {userName.username}
                  </Item.Description>  
                </Item>
              </Grid.Column>

            </Grid.Row>
        </Grid>
        <Dropdown item text='Sites'>
        <Dropdown.Menu name='sites' active={activeItem === 'sites'} onClick={this.handleItemClick} >
          <Dropdown.Item>Site Groups</Dropdown.Item>
          <Dropdown.Item>Sites</Dropdown.Item>
          <Dropdown.Item>Themes</Dropdown.Item>
          <Dropdown.Item>Sequences</Dropdown.Item>
          <Dropdown.Item>Landing Pages</Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
          
        <Menu.Item
          name='Campaigns'
          active={activeItem === 'Campaigns'}
          onClick={this.handleItemClick}
        />
        <Menu.Item
          name='Users'
          active={activeItem === 'Users'}
          onClick={this.handleItemClick}
        />
      <Menu.Item
          name='Settings'
          active={activeItem === 'Settings'}
          onClick={this.handleItemClick}
        />
      </Menu>
      </div>
    )
  }
}


export default NavBar

I’m looking just to have the greeting placed in the tag, plus the username’s name.

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>

Advertisement

Answer