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;
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.
Eg
{conditionToMeet &&
<div>
content to render here
</div>
}
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 }
)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.