CODEWITHSUNDEEP
reactjsreact-nativereact-native-iosnative-base
user9054759
user9054759

Reputation:

How to Render Two Components Conditionally?

How can I render these two components conditionally?

import React, { Component } from 'react';
import { Container, Header, Content, Card, CardItem, Text, Body } from 'native-base';
export default class CardHeaderFooterExample extends Component {
  render() {

    return (
      <Card>
        <CardItem header>
          <Text>NativeBase</Text>
        </CardItem>
        <CardItem>
          <Body>
            <Text>
              //Your text here
            </Text>
          </Body>
        </CardItem>
        <CardItem footer>
          <Text>GeekyAnts</Text>
        </CardItem>
      </Card>

lets say: 

if logedin={true}
  return  
    <Card>
      <CardItem header>
        <Text>NativeBase</Text>
      </CardItem>
      <CardItem>
        <Body>
          <Text>
            //Your text here
          </Text>
        </Body>
      </CardItem>
      <CardItem footer>
        <Text>GeekyAnts</Text>
      </CardItem>
    </Card>

else return 

  <Text> signup to access this content </Text>

How can be this conditional rendering be done for this situation? Those components should be rendered based on boolean logedin.

Upvotes: 1

Views: 3206

Answers (4)

achyut pokhrel
achyut pokhrel

Reputation: 746

You can achieve this in multiple ways.

  • Using multiple returns

    render()
{
  if(!logedin){
    return <Text> Signup to access this content </Text>;
  }

  return( <CardComponent/> );
}

  • Using ternary operator

condition ? statement to execute if condition is true : statement to execute if condition is false

    render()
    {
       return islogedin ? <CardComponent/> : <Text> Signup to access this content </Text>;
    }

Upvotes: 0

Patrick R
Patrick R

Reputation: 6857

You can achieve that by referring below:

render() {
  var1 =
    <Card>
      <CardItem header>
        <Text>NativeBase</Text>
      </CardItem>
      <CardItem>
        <Body>
          <Text>
            //Your text here
          </Text>
        </Body>
      </CardItem>
      <CardItem footer>
        <Text>GeekyAnts</Text>
      </CardItem>
    </Card>

var2 = <Text> signup to access this content </Text>

return(
  <View>
  {logedin == true
     ? var1
     : var2
  }
  </View>
);
}

Upvotes: 0

user6700624
user6700624

Reputation:

This is also possible:

return (
    { logedin && <YourComponentWhenLogedinIsTrue/> }
    { ! logedin && <YourComponentWhenLogedinIsFalse/> }
);

Upvotes: 0

Val
Val

Reputation: 22797

I think what you need is

return logedin==true ? (
  <Card>
    <CardItem header>
      <Text>NativeBase</Text>
    </CardItem>
    <CardItem>
      <Body>
        <Text>
          //Your text here
        </Text>
      </Body>
    </CardItem>
    <CardItem footer>
      <Text>GeekyAnts</Text>
    </CardItem>
  </Card>
) : (
  <Text> signup to access this content </Text>
)

remember change to this.props.logedin or this.state.logedin if they're belong to props or state.

Upvotes: 1

Related Questions