Delay in Rendering a Component?

Question

I'm attempting to make my own personal website, and trying to use React to do so. In the process, I intend to make each section a different React Component. My plan is to have the navbar at the top be able to select which component is currently "active", and actually gets rendered and shown. In addition, when switching to a new section, I would like the old component to have a "leaving" animation, and the new component to have an "entering" animation (these are done with react-motion). However, currently both the entering and leaving are done at the same time, because I'm changing the active state for both components at the same time. Is there any way to delay one component becomes active after another one becoming inactive?

The parent component that houses each section looks like so:

class Website extends React.Component {

  constructor(props){
    super(props)
    this.state = {
    homeActive: true,
    aboutActive: false
  }

  homeActivator(){
    this.setState({
      homeActive: true,
      aboutActive: false
    })
  }

  aboutActivator(){
    this.setState({
      homeActive: false,
      aboutActive: true
    })
  }

  render(){
    return (
      <div>
        <NavBar handleHome={this.homeActivator.bind(this)} handleAbout=
          {this.aboutActivator.bind(this)}/>
        <Home active={this.state.homeActive} />
        <About active={this.state.aboutActive} />
      </div>
}

And then one of the "sections" would look like so:

class Home extends React.Component{

  render() {
    let content = (
      <div>
        Home
      </div>
    )

    if (!this.props.active){
      return (
        //Some jsx that results in the content leaving the page
      )
    }

    return(
      //Some jsx that results in the content entering the page
    )
  }
}

You can use a set timeout function. If someone doesn't beat me to it, I can post an answer. — Dan Zuzevich, Jul 08 '17 at 00:00
Since I cannot see your dependencies I am just going to assume you are using the most up to date version of react-router which is v4. In the docs you can find about [animated transitions](https://reacttraining.com/react-router/web/example/animated-transitions). — Ozan, Jul 08 '17 at 00:17

score 0 · Answer 1 · answered Jul 08 '17 at 00:30

I did not have a ton of time to answer this, but came up with the best example I could. It's not an exact replica of what you are looking to do, but is very similar, so if you understand it, you will be able to figure out your problem quite easily.

To make things a little easier to understand, I am mimicking components with methods placed inside the React Class. Obviously in the real world, you would be importing your components from other files. I'm sure you'll understand what's going on.

export default class Example extends Component {
  constructor(props) {
    super(props)

    this.state = {
      c1: true,
      c2: false
    }
  }

  // Component One
  renderc1() {
    return (
      <div>
        I am component one
      </div>
    )
  }

  // Component Two
  renderc2() {
    return (
      <div>
        I am component two
      </div>
    )
  }

  changeComponents = () => {
    this.setState({ c1: false })

    setTimeout(() => {
      this.setState({ c2: true })
    }, 1500)
  }

  render() {
    return (
      <div className="example">

        {this.state.c1 ? this.renderc1() : null}
        {this.state.c2 ? this.renderc2() : null}

        <button onClick={this.changeComponents}>Click me</button>

      </div>
    )
  }
}

Clicking the button will fire off the changeComponents function, which will then immediately set the state of "c1" to false. A setTimeout after that ensures that component 2 will be delayed rendering to the screen.

Notice the arrow syntax, I used, which binds the this keyword to the class, so you don't have to worry about writing bind this everywhere.

Delay in Rendering a Component?

1 Answers1