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>
Source: stackoverflow.com
Related Query
- Adding a greeting to a React App based on the time of day
- Can't find variable: _d when running react native app for the first time
- How to trigger animations in a React app based on the scroll position
- React router after adding createBrowserHistory, the app is not working as expected
- how to run my node application and react app in the same time with one command?
- trying to use cookies in my react app but it gets re-rendered all the time
- Style sheet to be imported based on the current active component in a multi-page React app with React-Router
- How to transform the inner state based React app to Redux based?
- Creating a React app with 'create-react-app my-app' for the first time
- Compose React app based on the value of a flag
- how to validate date based on input type text and display the day according to input date in react
- Adding react components to header based on the page
- Can't update multiple state properties at the same time on my React App
- How do you change the current path name in real time based on textbox value? react router
- Adding images to react app based on random selection
- Problem regarding the time of downloading and creating app in react
- Changing the background color of my React app based on if another component is in the DOM
- TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app
- How to create a React app directly in the current folder
- How to show a loading indicator in React Redux app while fetching the data?
- What is the difference between NextJs and Create React App
- What is the quickest way to convert a React app to React Native?
- React app stuck on "Starting the development server"
- Error while creating new React app ("You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0)")
- What is the correct way of adding a dependency to react in your package.json for a react component
- What is the core difference of redux & reflux in using react based application?
- Adding border only to the one side of the <Text/> component in React Native (iOS)
- How to detect the device on React SSR App with Next.js?
- react native show current time and update the seconds in real-time
- The react-scripts package provided by Create React App requires a dependency:
More Query from same tag
- How do I do dynamic routing with Next.js based on slug from GraphQL API?
- React settimeout function causing page to refresh repeatedly
- React Material <Select> with regular HTML <input> or <select>
- reacts conditional rendering, to return array in render, react 16
- Restore scroll position in React Hooks with useRef is shaky
- Material UI: How to check which tab is active?
- How to apply margin to a div on condition using styled component and react?
- react.js cannot read the image by parameter
- I'm writing a test case in React related to authentication(using axios), But I am stuck because the test case is not passing
- How do I turn this into React Hooks for useEffect()?
- Duplicated header in web page using React
- Node Js Transformation JSON by JSON key
- Dynamically pass prop without any value in react native
- React Redux thunk form validation
- How to setState a nested object from API to a new object
- Webpack 2 : You may need an appropriate loader to handle this file type React
- Display/delete component on click
- react component does not render and it only appears in inspect section
- react-virtualized: SetState in AutoSizer
- webpack: How do you bundle all scss files into a single main.css file
- Cannot read propery of .includes undefined - react
- what's wrong with this jest test setup?
- Images from array in an object not displaying using React.js
- Passing props to children components with react-router v4
- How to cancel ALL requests in ComponentWillUnmount?
- "this" avaialable but "this.state" not available
- Why outer variable isn't change dynamically when changing inside inner functions?
- React Router and navigation buttons
- Add custom add-button in material-table
- how to parse json after exception handling promise with isomorphic-fetch