CODEWITHSUNDEEP
javascriptreactjsreact-native
user818700
user818700

Reputation:

React Native display View depending on conditional

In my render method I'd like to display one of two View components depending on a conditional that's in my props. e.g:

render() {
  return(
    <View>
      <View>View A</View>
      <View>View B</View>
    </View>
  );
}

Where the conditional is this.props.myConditional. If false, show A, if true, show B...

Upvotes: 3

Views: 10413

Answers (3)

hkniyi
hkniyi

Reputation: 353

There are multiple ways to display based on condition:

  1. Inline Condition

     { (link) && 
  <Text>Read More</Text> 
 }

  2. Inline Condition

    { (link) 
  ? <Text>Read More</Text> 
  : <Text>Thank you</Text> }

  3. Using a function

    const Displaylink = (props) => {

  const isLink = props.isLink;
  if (isLnk) {
   return <Text>Read More</Text>;
  }
  return <Text>Thank you</Text>;
}

Upvotes: 0

Arvind Mandhare
Arvind Mandhare

Reputation: 61

If you are Using Functional Component, The latest Approach then its much more easy as, 

return (
<View style={Condition ? Styles.A : Styles.B}>

</View>

)

const Styles = StyleSheet.create({ A: { display:"none" }, B:{ display:"flex" } } )

Rest you have to look into functional component

Upvotes: 3

Mμ.
Mμ.

Reputation: 8552

It's actually pretty easy

render() {
  return <View>
    {this.props.myConditional ? <View>View B</View> : <View>View A</View>}
  </View>
}

Upvotes: 11

Related Questions