reactjs, loop through an item and if condition on markup

Question

I am working on a reactjs component. I have 3 items, that I am looping through - but I only wish to show a button, under the first item. I am getting a syntax error.

<div className='row grid__row--offset--50'>
        <div className='small-55 medium-58 large-58 small-centered columns background--white--small border__transparent--top'>
          {
            lang.howTiles[0].items.map(function (item, index) {
              return (
                <div key={index}>
                  {index}
                  <div className='small-60 columns grid__row--offset--30 show-for-small-only'>&nbsp;</div>
                  <div className='small-45 medium-20 small-centered medium-uncentered columns'>
                    <div className='row'>
                      <div className='small-60 medium-45 small-centered columns'>
                        <div className='relative-container'>
                          <img className='centered' src={HowImage1} style={{maxWidth: '50%', marginLeft: '25%'}} />

                          <h3 className='text--bold text--center'><font><font>Project</font></font></h3>
                          <p className='text--center text--font-size-14'><font><font>Write out your project and show it to a hand-picked group of experts</font></font></p>
                        </div>
                      </div>
                    </div>
                    {
                      if(index==0){
                        <div className='grid__row--offset--40 row'>
                          <div className='small-40 columns small-centered'>
                            <a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a>
                            <a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/[email protected] 2x' /></a>
                          </div>
                        </div>
                      }
                    }
                  </div>
                </div>
              )
            })
          }

          <div className='medium-60 columns grid__row--offset--30'>&nbsp;</div>
        </div>
        <div className='row grid__row--offset--80'>&nbsp;</div>
      </div>

Unexpected token bug -- I tried wrapping the fragment of html in an return () — The Old County
– The Old County, Commented May 12, 2017 at 11:39

Mayank Shukla · Accepted Answer · 2017-05-12 11:51:13Z

2

We can't directly use if-else/switch statement inside JSX, use either ternary operator or call a function from JSX and use if-else/switch inside that.

Use this:

{
    index == 0 ?
        <div className='grid__row--offset--40 row'>
          <div className='small-40 columns small-centered'>
            <a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a>
            <a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/[email protected] 2x' /></a>
          </div>
        </div>
    : null
}

Update:

Another possible solution is call a function from render method and use the if condition inside that, like this:

{
    this._checkCondition()
}

_checkCondition(index){
    if(index == 0){
        return (
            <div className='grid__row--offset--40 row'>
              <div className='small-40 columns small-centered'>
                <a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a>
                <a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/[email protected] 2x' /></a>
              </div>
            </div>
        )
    }
}

For more details why we can't use if-else in JSX check the DOC.

edited May 12, 2017 at 11:51

answered May 12, 2017 at 11:41

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

The Old County Over a year ago

that worked.. but why did this take - and not the above sample -- is there a version - where what I had done - would work -- wrapping it in {}, return?

Mayank Shukla Over a year ago

check the updated answer, provided a link to doc why we can't we if-else inside jsx?

The Old County Over a year ago

{(() => { if(index == 0){ <div className='grid__row--offset--40 row'> <div className='small-40 columns small-centered'> <a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a> <a href='localhost/slack'><img alt='Add to Slack' height='40' width='139' src='platform.slack-edge.com/img/add_to_slack.png' srcSet='' /></a> </div> </div> } )()}

Mayank Shukla Over a year ago

because you are creating a function by {(() => and using if condition inside that, it will work, i mentioned that in my answer you can call a function and use the if condition inside that.

The Old County Over a year ago

-- what about the other answer -- he says it would work with just wrapping the markup with ()

|

Community · Accepted Answer · 2017-05-23 12:26:17Z

0

Or you can try other approach. If index==false all between () will be rendered. Remember - javascript has dynamic typing

    {!index &&
    (<div className='grid__row--offset--40 row'>
      <div className='small-40 columns small-centered'>
        <a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a>
        <a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/[email protected] 2x' /></a>
      </div>
    </div>)}

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered May 12, 2017 at 11:48

kurumkan

2,7354 gold badges35 silver badges56 bronze badges

6 Comments

The Old County Over a year ago

^ so this looks similar to what I was trying to do before -- where the markup is wrapped up ?

kurumkan Over a year ago

Yes. Try this too. Only if index is 'falsy' the thing between () will be rendered

The Old County Over a year ago

well index would be 0 -- as it hits the first element?

kurumkan Over a year ago

it's not clear, what do you mean? If index is 0 - it will be treated as false in heare

The Old County Over a year ago

well the index is going to be an int -- as it loops through an array of data -- 0,1,2 -- so instead of !index -- should be index ===0

|

Collectives™ on Stack Overflow

reactjs, loop through an item and if condition on markup

2 Answers 2

12 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related