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/add_to_slack@2x.png 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, May 12 '17 at 11:39

Mayank Shukla · Answer 1 · 2017-05-12T11:51:13.040

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/add_to_slack@2x.png 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/add_to_slack@2x.png 2x' /></a>
              </div>
            </div>
        )
    }
}

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

edited May 12 '17 at 11:51

answered May 12 '17 at 11:41

Mayank Shukla

100,735
18
158
142

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? – The Old County May 12 '17 at 11:43
check the updated answer, provided a link to doc why we can't we if-else inside jsx? – Mayank Shukla May 12 '17 at 11:44
{(() => { if(index == 0){

{lang.howTiles[0].button.title}

} )()} – The Old County May 12 '17 at 11:46
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. – Mayank Shukla May 12 '17 at 11:51
-- what about the other answer -- he says it would work with just wrapping the markup with () – The Old County May 12 '17 at 11:53
that is also correct, since you just want to render that part when index will be zero, and don't want to render anything when condition fails that's why. So it will be easy to use ! of index. – Mayank Shukla May 12 '17 at 11:55
think it should be === – The Old County May 12 '17 at 12:02
you can use === also, here index will always be number that's why, there will be no problem with ==. – Mayank Shukla May 12 '17 at 12:05
99:36 error '?' should be placed at the beginning of the line operator-linebreak – The Old County May 12 '17 at 12:11
^ code is breaking -- ? should be placed at the beginning? – The Old County May 12 '17 at 12:20
the first part should work use that in same way, like this: `{index == 0 ? ....}` – Mayank Shukla May 12 '17 at 12:28
it should - it was -- but its busting – The Old County May 12 '17 at 12:28

score 0 · Answer 2 · edited May 23 '17 at 12:26

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/add_to_slack@2x.png 2x' /></a>
      </div>
    </div>)}

edited May 23 '17 at 12:26

Community

1
1

answered May 12 '17 at 11:48

kurumkan

2,635
3
31
55

^ so this looks similar to what I was trying to do before -- where the markup is wrapped up ? – The Old County May 12 '17 at 11:49
Yes. Try this too. Only if index is 'falsy' the thing between () will be rendered – kurumkan May 12 '17 at 11:51
well index would be 0 -- as it hits the first element? – The Old County May 12 '17 at 11:56
it's not clear, what do you mean? If index is 0 - it will be treated as false in heare – kurumkan May 12 '17 at 11:59
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 – The Old County May 12 '17 at 12:01
I updated the answer. Please find out more about javascript dynamic typing. – kurumkan May 12 '17 at 12:08

reactjs, loop through an item and if condition on markup

2 Answers2