if statement in render method - react native

Question

i would like to use if statement in the return of render method , what i mean is something like this :

export default class App extends Component 
{

   render()
   {
        return(
             <View>
               if(this.state.error)
               {
                 <View>
                       <Image source={{"error"}} />
                       <Text>An Error Happen</Text>
                   </View>
               }
               else
               {
                   <View>
                       <List dataArray={this.state.items}></List>
                   </View>
                }
              </View>
        );
   }

}

i can use ternary operator , but what i want is to use if statement if it possible

You cannot use JS inside JSX. You can put this in a helper function and render it in the return method. — Etherealm, Jul 20 '17 at 14:12
[Read the documentation for React.](https://facebook.github.io/react/docs/conditional-rendering.html) — Michael Cheng, Jul 20 '17 at 14:13

asky · Accepted Answer · 2022-02-12T23:54:16.213

Background

What is the difference between a statement and expression

Specific to JavaScript:

What is the difference between an expression and a statement in JS?

JavaScript: declarations vs expressions vs statements

return expects an expression as the argument. if statements are not expressions (makes sense, since statement is in the name).

The implementation details of JSX (that stuff with <Tags>, but in javascript) is also relevant. JSX is compiled into normal JavaScript.

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

compiles to

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

documentation.

If you want to evaluate a JavaScript expression in JSX you need to enclose it in curly braces.

const myButtonColor = 'blue'
//...
<MyButton color={myButtonColor} shadowSize={2}>
  Click Me
</MyButton>

Back to the Question

Ways of accomplishing if-like functionality:

inline logical and (&&)
ternary operator (?)
return in if/else statements

Let's look at some examples:

Inline Logical And

render() {
  return (
    <View>
      {this.state.error && <Text> There's an error! </Text>}
    </View>
  )
}

This method is the simplest and I recommend trying it first. It makes sense when you don't want to do anything if the condition evaluates to false. && behaves a bit different in javascript than in other languages. When this.state.error evaluates to false, render returns this.state.error, which may have unintended consequences if this.state.error happens to be the empty string or 0.

Ternary Operator

render() {
  return (
    <View>
      {this.state.error ? <Text>Error!</Text> : <Text>No Error!</Text>}
    </View>
  )
}

The biggest problem with this is that the lines get long pretty quickly. You can get around this with parentheses.

render() {
  return (
    <View>
      {this.state.error ? (
        <Text>Long, detailed error message</Text>
      ) : (
        <Text>No Error!</Text>
      )}
    </View>
  )
}

You could alternatively use JavaScript strings declared before return along with this method.

Return in if Block

render() {
  if(this.state.error) {
    return (<Text>Long, detailed error message</Text>)
  }
  else {
    return (<Text>No Error!</Text>)
  }
}

The problem with this method is if that if you have a long render method and a small conditional change, you will have to nearly repeat the render function in each if block. I generally use this method as a last resort.

Indeed it did. I just fixed it. – asky May 07 '20 at 21:34 — asky, May 07 '20 at 21:34
Cool :+1: Thanks for the answer, though! – Roc Boronat May 08 '20 at 16:05 — Roc Boronat, May 08 '20 at 16:05

score 8 · Answer 2 · answered Jul 20 '17 at 14:43

this is the simple one :

render()
   {
        return(
             <View>
               {this.state.error ?
                 (<View>
                       <Image source={{"error"}} />
                       <Text>An Error Happen</Text>
                 </View>)
               :
                 (<View>
                       <List dataArray={this.state.items}></List>
                 </View>)
                }
              </View>
        );
   }

maybe can help you :)

score 2 · Answer 3 · answered Jul 20 '17 at 14:18

You should try somthing like this:

export default class App extends Component {
render() {
  if(this.state.error)
  {
    return (
     <View>
       <Image source={{"error"}} />
       <Text>An Error Happen</Text>
     </View>
     )
  }
  else {
    return (
      <View>
        <List dataArray={this.state.items}></List>
      </View>
     );
   }
  }
}

score 1 · Answer 4 · answered Jul 20 '17 at 14:17

1

You can do this:

 render()
   {
        return(
             <View>
               {this.state.error && 
                 <View>
                       <Image source={{"error"}} />
                       <Text>An Error Happen</Text>
                   </View>
               }
               {!this.state.error &&
                   <View>
                       <List dataArray={this.state.items}></List>
                   </View>
                }
              </View>
        );
   }

answered Jul 20 '17 at 14:17

assembler

3,098
12
43
84

what i want to use `if` , but it seem to be not possible – Ali Faris Jul 20 '17 at 14:19
you can not use `if` within a return block – assembler Jul 20 '17 at 14:22

score 1 · Answer 5 · answered Jul 20 '17 at 14:18

1

I suggest to take advantage of js in this case:

{ this.state.error &&
   <View>
    <Text>show error</Text>
   </View>
}
{ !this.state.error &&
   <View>
    <Text>all good</Text>
   </View>
}

It can look better than ternary in some cases.

answered Jul 20 '17 at 14:18

Simon

138
7