score:4
Accepted answer
your code does not render anything related to the current time. this line:
<p>{setinterval(this.displaytime,1000)}</p>
does not print the current time - it displays created interval's id, because that's what is returned by setinterval()
function.
so, first of all, you should change this line to display the time, based on component's state. this can be done like this:
<p>{this.state.time}</p>
another thing you have to do is to properly create the interval. setting it in render()
method is not a good idea, because you will create a new interval
componentdidmount() {
// arrow function allows you to use "this" in context of the component
this.interval = setinterval(() => {
this.displaytime();
}), 1000);
}
(you should also remember to deactivate the interval once component is removed from the view).
Source: stackoverflow.com
Related Query
- Creating a running clock using moment & moment-timezone in react
- Error while creating new React app ("You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0)")
- npm ERR! 401 Unauthorized: @babel/core@7.1.0 when using creating new react app
- translate on Y using SectionList and header view creating empty space on scroll - react native
- Error creating react application > Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"
- How to display working digital clock using React
- React JS, creating a clock timer inside Component
- Creating react app using create-react-app is taking long time and is not successful
- Creating excerpts using Contentfuls rich text react render
- creating a bar chart using Highcharts with React - getting an error that rendering div isn't found
- Creating radio button in React using ref
- Creating a survey using React but stuck finding a way to have questions dependent on certain responses
- Running into problems using React Datepicker with rails
- creating common header and sidebar across all the page using react router
- React Moment problem on DatePicker when using moment (Maybe dependencies)
- how to take out the day name from the input date without using moment js in react
- Creating dynamic checkboxs for each row using react js
- Running react and flask using a single shell script
- Saving the document id at the time of creating a document in Firebase v9 using React JS
- Creating a YouTube playlist with React using Google's API
- Creating Chart.js using API data in react
- S3 creating empty files when uploading a file from React contact form using Axios
- Creating React apps using npx create-react-app is very slow , Is there any way to speed it up?
- Creating a dynamic gauge in React using percentages
- Creating and using an interface for a history-object in React Typescript?
- How to get react test using moxios to update the DOM before running later part of the test
- Invalid Date in edit form on birthday field using React JS and moment
- React Reflux error when running compiled JSX but not when using transformer
- "ReferenceError: require is not defined", while creating React component using ES6/Babel
- React - Creating table using loop in class method
More Query from same tag
- Cannot read property 'someFunction' of null for 'someFunction' within onClick
- react-redux: `state.get` is not a function
- Make tags on Select editable
- Push to Login page if user is not logged in, else let inside
- React Hook useEffect has a missing dependency, using Redux
- How to filter JSON data from API and setState in React
- How can I optimize my validation code in reactjs?
- React Router 1.0 - replace # and get rid of ?_k
- I don't know what to do with this ReactJS problem
- MUI5 TextField not affected with the RTL direction
- React re-renders list items in same card instead of a list of cards
- Is there anything goes wrong while drwaing line in react-map-gl?
- CSSTransition is not triggered
- Component returns array of div not rendering inside the parent component
- How to submit a form with KotlinJS and React?
- How to fetch initial value using useState() before the component is mounted
- React get value from HandleInputChange function
- Why does sx prop typecheck fail?
- Div already filling its spot before it transitions in React
- React Hooks - setting object not re-rendering the component's data
- GET http://localhost:5000/error 404 (Not Found)
- Redux-form-material-ui - use Select with onChange
- pass the value of a checkbox to a state in React Js
- Is there a way to import from react-icons dynamically by iterating through an array?
- How to remove pre-selected options when loading select control?
- React Rails component: manually triggering a re-render
- How to make all TextField's small by default?
- React Material-UI Treeview the prp type 'nodeID' is marked as required
- React Material UI prevent List re-render
- <Route> not show the component