I've been combing through docs and I can't seem to find a simple example of a conditional in gatsby that is NOT a renderer condition.

I'm looking to compare within a mapped object, which is handled in the render method: (basic pseudo code)

class someTemplate extends Component {
  render() {
    const someobject = this.props.data.someobject

    return (
      <div id="page-wrapper">
        {someobject.map((layout, i) => {
            return (
            <div className={(i === 0 ? (`slideshow-item shown`) : (`slideshow-item`) )}>

                {if(i === 1)} 
                    show something 
                {else if(i === 2)} 
                    show something else 
                {else} 
                    show default 
                {/if}

            </div>
            )
          })
        }
      </div>
    )
  }
}

So the ternary you see for the className works fine. But as an example I may have 15 items in the loop and I want to make sure I set classes for the first 3 items, for example. In my findings, I see a lot of people giving examples of conditional rendering outside the return statement, but I do not want to make the whole chunk of code conditional for a few simple classes.

Is this possible in gatsby.js or do I really need to break things apart into components to achieve something so simple?

I've been combing through docs and I can't seem to find a simple example of a conditional in gatsby that is NOT a renderer condition.

I'm looking to compare within a mapped object, which is handled in the render method: (basic pseudo code)

class someTemplate extends Component {
  render() {
    const someobject = this.props.data.someobject

    return (
      <div id="page-wrapper">
        {someobject.map((layout, i) => {
            return (
            <div className={(i === 0 ? (`slideshow-item shown`) : (`slideshow-item`) )}>

                {if(i === 1)} 
                    show something 
                {else if(i === 2)} 
                    show something else 
                {else} 
                    show default 
                {/if}

            </div>
            )
          })
        }
      </div>
    )
  }
}

So the ternary you see for the className works fine. But as an example I may have 15 items in the loop and I want to make sure I set classes for the first 3 items, for example. In my findings, I see a lot of people giving examples of conditional rendering outside the return statement, but I do not want to make the whole chunk of code conditional for a few simple classes.

Is this possible in gatsby.js or do I really need to break things apart into components to achieve something so simple?

• javascript
• reactjs
• if-statement
• gatsby

1 Answer 1

Such conditions don't have anything to do with Gatsby itself. You are now in the JSX syntax world. You can write them like this:

<div className={i === 0 ? `slideshow-item shown` : `slideshow-item`}>
  {i === 1 && <span>show something</span>}
  {i === 2 && <span>show something else</span>}
  {i > 2 && <span>show default</span>}
</div>

Also note that you need to return a node - thus the <span> element in the above example (it could be any other valid node).

EDIT: Instead of <span> element a React.Fragment can be used to avoid extra DOM elements:

{i === 1 && <>show something</>}