Why am I getting unexpected token in JSX section when I use an if case inside map command?

Question

I have this code here inside the return section in React-

this.state.paymentoptions.map((x)=>(
                                    <div><button style={{marginLeft:'10px'}}>{if(x.method!=online){x.method}}</button><br></br></div>
                                ))

Here I am trying to use if inside the map. But its giving me Unexpected token. How to fix this?

try to use a ternary. `x.method !== online ? x.method : null` — Bruno Paulino, Jun 18 '18 at 09:04

score 0 · Answer 1 · answered Jun 18 '18 at 09:04

The if inside the JSX is the problem. You can't do it like that. This should work.

this.state.paymentoptions.map((x)=>(
          <div>
            <button style={{marginLeft:'10px'}}>
              {x.method !== online ? x.method : null}
            </button><br></br>
          </div>
        ))

Why am I getting unexpected token in JSX section when I use an if case inside map command?

1 Answers1