Basic example using React

Question

I'm reading this tutorial about React.

I try to do this example. This is my code:

    import React from 'react'

    export default class App extends React.Component {      

    render() {

        function tick() {
            const element = (
                <div>
                    <h1>Hello, world!</h1>
                    <h2>It is {new Date().toLocaleTimeString()}.</h2>
                </div>
            );
        }

        return (    
            setInterval(tick, 1000) 
        );

    } 
}

It doesn't work, I get no errors, but it doesn't do what it should.

The error I get is:

ksav · Accepted Answer · 2018-09-27 20:30:48Z

1

You need to move the tick() function out of the render method and the render method needs a return statement

      tick = () => {
          const element = (
              <div>
                 <h1>Hello, world!</h1>
                 <h2>It is {new Date().toLocaleTimeString()}.</h2>
             </div>
          );
          return element;
       }

      render(){
          return (    
               <div>{setInterval(this.tick(), 1000)}</div>
           );
      }

edited Sep 27, 2018 at 20:30

ksav

20.9k6 gold badges52 silver badges69 bronze badges

answered Sep 25, 2018 at 13:34

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user10381316 Over a year ago

I get: error Parsing error: Unexpected token 3 | export default class App extends React.Component {

Hemadri Dasari Over a year ago

Updated my answer. Can u check now should be fine this time

user10381316 Over a year ago

Now I get that tick is not defined

Hemadri Dasari Over a year ago

Sorry my bad it should be this.tick() in setInterval. Check my updated answer

user10381316 Over a year ago

Ok, now I'm in the start situation, no errors but it prints only 2.. Thanks for your patience

|

Collectives™ on Stack Overflow

Basic example using React

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related