What is the syntax for a simple if conditional in gatsby.js

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?