CODEWITHSUNDEEP
javascriptreactjsecmascript-6componentssingle-page-application
Irene Rojas
Irene Rojas

Reputation: 57

React - prevent all child components from mounting on load

I'm trying to create a single-page React app that mounts certain components at a time. The components are all loading at once instead.

The StackOverflow posts I have found about mounting components are about preventing them from re-rendering upon changes. I have 3 sections and I only want one to appear on page load. I want Timer to appear first. When the start button is pressed, then I want Questions to appear. Finally when either the timer hits zero or the user presses the submit button, Results appears. The individual components are working as I want, but I want to hide them until they are called. FYI - (selectedOption) is from the React-Select dependency.

Repo: https://github.com/irene-rojas/pixar-react

App

import React, { Component } from 'react';
import './App.css';
import Timer from "./Timer";
import Questions from "./Questions/Questions.js";
import Results from "../src/Results";

class App extends Component {

state = {
    totalTrue: 0,
    totalFalse: 0,
}

componentDidMount() {
    return (
        <Timer />
    )
}

// submit button
handleFormSubmit = event => {
    event.preventDefault();
    console.log("submit button clicked");
        return (
            <Results />
        )
};

callbackHandlerFunction = ( selectedOption ) => {
    const answerValue = selectedOption.value;
    if (answerValue === true) {
        this.setState({totalTrue: this.state.totalTrue + 1}, () => {
            console.log(`New TotalTrue: ${this.state.totalTrue}`);
        });
    };
    if (answerValue === false) {
        this.setState({totalFalse: this.state.totalFalse + 1}, () => {
            console.log(`New TotalFalse: ${this.state.totalFalse}`);
        });
    };
  } 

  render() {
    return (

  <div className="parallax">

    <div className="App">

        <div className="wrapper">

        <div className="headerDiv">
            <h1>Pixar Trivia!</h1>
        </div>

        <div className="timerDiv">
            <Timer />   
        </div>

        <div className="questionSection">
            <Questions 
                handleClickInParent={this.callbackHandlerFunction} 
            />

            <div>
                <button onClick={this.handleFormSubmit}>Submit</button>
            </div>
        </div>



        {/* this code will hide Results until these conditions are met. This was an experiment to see if anything hid Results from mounting on load */}
        {this.state.totalTrue >= 8 && this.state.totalFalse >= 8 &&
        <div className="resultsDiv">
            <Results 
                totalTrue={this.state.totalTrue}
                totalFalse={this.state.totalFalse}
            />
        </div>
        }      
        </div>

    </div>

  </div>
   );
  }
}

export default App;

Timer 

import React, { Component } from 'react';

class Timer extends Component {

  state = {
timer: 10
  };

  startTimer = () => {
    this.timer = setInterval(() => this.setState({
    timer: this.state.timer - 1}), 1000); 
    // onClick, load Questions
    // but do I need to import Questions?
   };

  stopTimer = () => {
    clearInterval(this.timer);
    alert("Time's up!");
    // when this.state.timer === 0, load Results
    // do I need to import Results?
  };

  render() {
    return (
      <div className="Timer">
        <div>{this.state.timer} seconds</div>
        <button onClick={this.startTimer}>Start!</button>
        {this.state.timer === 0 && this.stopTimer()}
      </div>
    );
  }
}

export default Timer;

Upvotes: 0

Views: 3676

Answers (2)

Sahil Raj Thapa
Sahil Raj Thapa

Reputation: 2473

you can check condition inside render method and display desired component

render() {
  let renderedContent;
  if (condition to meet) {
      renderedContent = <Component1>
  } else if ( second condition to meet) {
     renderedContent = <Component2>
  } else { 
     renderedContent = <Component3>
  }

  return (
    { renderedContent }
  )
}

Upvotes: 0

Keno
Keno

Reputation: 2098

You should look into conditional rendering. Your App's render() has all of the subcomponents there by default. You'll either want to set them to hidden or not render them at all.

E.g.

{conditionToMeet &&
 <div>
    content to render here
 </div>
}

Upvotes: 5

Related Questions