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
– Etherealm, Commented Jul 20, 2017 at 14:12

asky · Accepted Answer · 2022-02-12 23:54:16Z

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.

Rizal Sidik · Accepted Answer · 2017-07-20 14:43:32Z

8

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 :)

answered Jul 20, 2017 at 14:43

Rizal Sidik

9898 silver badges19 bronze badges

Comments

Poptocrack · Accepted Answer · 2017-07-20 14:18:27Z

2

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>
     );
   }
  }
}

answered Jul 20, 2017 at 14:18

Poptocrack

3,0281 gold badge15 silver badges29 bronze badges

Comments

assembler · Accepted Answer · 2017-07-20 14:17:30Z

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, 2017 at 14:17

assembler

3,31813 gold badges51 silver badges102 bronze badges

2 Comments

Ali Faris Over a year ago

what i want to use if , but it seem to be not possible

assembler Over a year ago

you can not use if within a return block

Simon · Accepted Answer · 2017-07-20 14:18:52Z

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, 2017 at 14:18

Simon

1387 bronze badges

Collectives™ on Stack Overflow

if statement in render method - react native

5 Answers 5

Background

Back to the Question

Inline Logical And

Ternary Operator

Return in if Block

1 Comment

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Background

Back to the Question

Inline Logical And

Ternary Operator

Return in if Block

1 Comment

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related