![](https://i.stack.imgur.com/U0v38.gif)

**Expected component behaviour:** 
- Load animation as defined by 'if' condition
- Then after 1000ms, the setTimeout function will change the state, thus rendering the 'else' part of the conditional

**Additional Details**
The component loads in fine, however, when I have another instance of the component created, both on alerts fire at the same time, and the this.render.state is set to true. This prevents the animation from loading as part of the conditional statement, since state.render is true... even though it should be false... Shouldn't each instance of this component display the default conditional behaviour?

**Name.js Component**

```

export class Name extends Component {
  state = {
    render: false,
  };

  componentDidMount() {
    //alert('Test')
    setTimeout(
      function () {
        //Start the timer
        this.setState({ render: true }); //After 1 second, set render to true
      }.bind(this),
      1000
    );
  }

  render() {
    if (this.state.render === false) {
      return (
        <div className={styles.LContainer}>
          <div className={styles.ldsRing}>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      );
    } else {
      console.log(this.state.render)
      return (
        <div className={styles.Container}>
          <img
            className={styles.imageO}
            src={require("./Apple_logo_white.svg")}
          />
          <div className={styles.textArea}>
            <h1 className={styles.title}>{this.props.title}</h1>
            <h2 className={styles.subtitle}>
            {this.props.sub}
          </h2>
          <Input name="name" handleChange = {this.props.handleChange} />
          <ScreenButton  goDirection={this.props.backScreen}  direction="back"/>
          <ScreenButton  goDirection={this.props.nextScreen}  direction="next"/>
          </div>
        </div>
      );
    }
  }
}

```

**I'm also using a switch statement to render these components, could that have anything to do with it?**

```
render() {
    //Pulling information down from state:
    const { step, name, interest, location } = this.state;
    const values = { step, name, interest, location };

    switch (step) {
      case 1:
        return (
          <Welcome
            nextScreen={this.nextScreen}
            handleChange={this.handleChange}
            values={values}
          />
        );

      case 2:
        console.log(this.state.step);
        //return <h1>GOLS</h1>
        return (
            <React.Fragment>
          <Name
            nextScreen={this.nextScreen}
            backScreen={this.backScreen}
            handleChange={this.handleChange}
            values={values}
            sub="Example text"
            title="Example text"
          />
          </React.Fragment>
        );

      case 3:
        console.log(this.state.step);
        return (
          <React.Fragment>
            <Name
              nextScreen={this.nextScreen}
              backScreen={this.backScreen}
              handleChange={this.handleChange}
              values={values}
              sub="Example text"
              title="Example text"
            />
          </React.Fragment>
        );

    }
  }

  [1]: https://i.stack.imgur.com/U0v38.gif

```