How to conditionally render a DIV and REACT component for OPENING and CLOSING tags?

Question

I have a piece of code that should be rendered based on the condition applied. For example:

isMobile ? <MyComponent> : <div className={styles.myclassStyle}>

....other code goes here....

isMobile ? </MyComponent> : </div>

if isMobile is true, then MyComponent should be selected otherwise the html element
div . Is it possible to do so? Any alternate solution?

Answer 1

you would conditionally render the entire bit of code and you would would have to return it in parenthesis with a single root element. so for instance

{
  isMobile ? (
    <MyComponent>
      // this code runs if isMobile === true
      // ... code for MyComponent
    </MyComponent>
  ) : (
    <div className={styles.myclassStyle}>
      // this code runs of isMobile === false
      // ... code for the div goes here
    </div>
  )
}