0

Thanks for the great job here. I am new on reactJS and building my application view layer with it.

I am trying to make a header with a message load 3 seconds after the page loads completely and I have no idea here to start.

Google search was not fruitful so I am asking our developer community for some help.

Here is what I want to do : When page finish loading I want a header to load 2 seconds after the page is complete loading.

Please be nice , I am a newbie.

Improve this question
1
  • How do you manage your application state? Conceptually you just need to add a setTimeout on page load which modifies your app state... Commented May 28, 2017 at 7:55

1 Answer 1

Reset to default
1

Something like this?

class Home extends React.Component {
    constructor() {
       super();
       this.state = {
          showHeader: false
       }
    }

    componentDidMount() {
       setTimeout(() => this.setState({showHeader: true}), 2000);
    }

    render() {
       return (
           this.state.showHeader && <div>Header</div>
       );
     }
}

ReactDOM.render(<Home/>, document.getElementById('app'))
<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='app'/>

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

4 Comments

can you put this into a sandbox so I can test and see how can I implement it into my code ?
okay looks like I have a beginning of something here. What if I want to load a specific className into my comment ? what parameter should I change ?
Just make it a state and use conditional rendering. Something like: className={this.state.showClass ? 'class-name' : ''}
okay thanks I managed to make it work with your tip and some JS tricks

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.