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
- FullCalendar New Appointment Button for Creating an Event
- React Router v5.0 Nested Routes
- How to deal with a value that might be an array, or might be only a single item react component
- How to prevent useEffect() run twice after running a function in context consumer and prevent useContext() to re-render
- React Router Navlink to another Page using props passed from a Parent
- How to Change Default Error Text in Yup/Formik?
- Element type is invalid: expected a string (for built-in components) Check the render method of `UploadProduct`
- How do I resize and svg logo in react gatsby?
- React not recognising an imported array
- How to preload a CSS @font-face font that is bundled by webpack4+babel?
- Slow lint with prettier
- Breadcrumb react code not working, how can i fix it?
- How to display only part of a background image: linear gradient?
- How to mock an object/function inside a module
- How to analyze create react app build size and reduce it?
- How to fix:Parsing error: Unexpected token, expected "..."
- How to create a custom top navigation bar in React Native
- Error resolving module specifier: react while doing dynamic import from API
- react onclick data-value return null
- Can I omit Return value in arrow function in JavaScript?
- Is it possible to use conditional rendering of a React component when a variable is undefined?
- In React, how to restrict the number of children with Typescript?
- Reactjs: Components are not changing by clicking on NavLinks
- Rendered component in Route does not fire its componentDidMount
- Force update to make functional component re-render
- Nested route request interpreted as request for CSS file
- Entering spaces in a validated input field (useForm)
- Correctly destructuring this.props for the whole component
- Toggle Visibility based on Dropdown value ReactJS
- react-datepicker input width will not adjust to 100%