reactjsrender

Rendering a new component inside componentDidMount - React


I will have to render a new component after all the expected components are loaded. I will need a timeout based on which the the new component has to be rendered. So this new component has to show up after 5 minutes after the page has loaded. I need to render a component called new_component that extends React.component

public componentDidMount(): void {
      if (visited) {
      setTimeout(() => {
        console.log('Reached the timeout')
        //Render the new conponent here. (Not sure how to call the render function of another component here)
      }, timeout);
    }

Can someone help me call the render function of new_component inside componentDidMount please. i tried new_component.render(). But that does not seem to work.


Solution

  • You can use state to track this.

    componentDidMount() {
        setTimeout(() => {
            this.setState({ showNewComponent: true })
        })
    }
    

    and in render:

    render() {
        if (this.state.showNewComponent) {
             return <NewComponent />
        }
        return null
    }