I have a component I want to appear once the timer is done

user_18137450 0
Viewed 44

I have my component CountDownSquare I want to disappear once the timer is done fully counting down. I have Data in homePageData that holds the main text in a h3 element, this text should appear once the timer is fully done. Here's a ternary statement I attempt to assign but it isn't assigned to anything the way I thought it would be. Here is a snippet of what I thought of

  const { homePageData } = props;
  {homePageData[0].showCountdown ? <CountDownSquare/>: styles.homeBody}


  return (
    homePageData && (
      <Layout>
        <div className={styles.Home}>
          <Image src={wordmark} alt="Hammer and Hope wordmark" />
            <CountDownSquare >
          </CountDownSquare>    
          {/* <div className={styles.homeBody}>
          <h3 className={styles.mainText}>{homePageData[0].mainText}</h3>  */}
            <Nav />
          </div>
      </Layout>
    )
  );
}  ```
reactjs javascript
1 Answers

I am assuming homePageData[0].showCountDown is a boolean which is true if the countdown is complete in the parent component.

You need to add conditions while rendering your component.

The following snippet will render the CountDownSquare component and the h3 tag with homePageData[0].mainText if homePageData[0].showCountdown is true.

  const { homePageData } = props;

  return (
        homePageData ?? (
        <Layout>
            <div className={styles.Home}>
            <Image src={wordmark} alt="Hammer and Hope wordmark" />
                {homePageData[0].showCountdown ?? 
                    <CountDownSquare >
                    </CountDownSquare>    
                    <div className={styles.homeBody}>
                        <h3 className={styles.mainText}>{homePageData[0].mainText}</h3> 
                    </div>
                }
            </div>
        </Layout>
        )
    );
user_114175400
Related