can't use if/else inside react render method

Question

I am using React with Ant Design, but this is only a react issue.

I have a code like this:

  {
    title: "Group",
    dataIndex: "group",
    key: "group",
    render: text => (
     <a> {text} </a>
    )
  }

Not the render: text => () which allows me to use html inside a js function (or jsx?)

but, if I try to put if/else logic I get always an error.

Right now I am using something stupid like this:

render: texts => (
  <span>
     {[""].map(text => {
      if(texts.includes(":")) {
       return (<b> {texts} </b>)
      }
    return (<a> {texts} </a>)
  })}
</span>

The questions is, is there a way to do it without using [""].map() and why won't simple if/else work

Please check this doc page: reactjs.org/docs/…

sigmus
– sigmus

2019-11-10 16:41:18 +00:00
Commented Nov 10, 2019 at 16:41 — sigmus
– sigmus, Commented Nov 10, 2019 at 16:41

Aprillion · Accepted Answer · 2019-11-10 16:53:01Z

4

Why it's not possible:

there is a difference between Expressions versus statements in JS:

An expression produces a value ... a statement performs an action.
the {} syntax allows Embedding Expressions in JSX, but it does NOT allow embedding statements
if is a statement

An equivalent expression, using a conditional operator to replace if:

render: texts => (
  <span>
     {texts.includes(":")
       ? <b>{texts}</b>
       : <a>{texts}</a>
     }
  </span>
)

answered Nov 10, 2019 at 16:53

Aprillion

22.4k6 gold badges59 silver badges94 bronze badges

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

Comments

giuseppedeponte · Accepted Answer · 2019-11-10 16:50:17Z

3

You cannot use if/else inside JSX, but you can either use a ternary expression inside the JSX or an if/else condition inside your function before returning some JSX. Here is an example of both:

    {

      render: texts => (
        <span>
          { 
            texts.includes(":")
              ? <b> {texts} </b>
              : <a> {texts} </a>
          }
        </span>
      ),

      otherRender: texts => {
        if (texts.includes(":")) {
          return (
            <span><b> {texts} </b></span>
          )
        }
        return (
          <span><a> {texts} </a></span>
        )
      }

    }

answered Nov 10, 2019 at 16:50

giuseppedeponte

2,3711 gold badge12 silver badges20 bronze badges

Collectives™ on Stack Overflow

can't use if/else inside react render method

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related