CODEWITHSUNDEEP
reactjsreact-native
j.doe
j.doe

Reputation: 4859

How to conditionally add component in react

My code looks to somethis like 

<iOSOnlyComponent>
.....
.....
.....
</iOSOnlyComponent>

Want to use the iOSOnlyComponent only on iOS. I tried this

{isIOS && <iOSOnlyComponent>}
.....
.....
.....
{isIOS && </iOSOnlyComponent>}

But I got a syntax error

Upvotes: 4

Views: 2399

Answers (3)

Dyo
Dyo

Reputation: 4464

If the conditionnal rendering makes your component too complex you can simply separate it in 2 files naming them myComponent.android.js and myComponent.ios.js then simply import myComponent from './myComponent'

React will choose the right file automatically.

Upvotes: 1

G_S
G_S

Reputation: 7110

You should do something like (untested code)

 render() {
    const helloMessageIOS = <iOSOnlyComponent> Hello, JSX! </iOSOnlyComponent>;
  return (
    <ScrollView >
       {isIOS  && helloMessageIOS   }
    </ScrollView >
  );
}

If iOSOnlyComponent component is huge, you can simply add it to a function and return it from there.

May be as below (untested code)

render() {
    return (
    <View >
       {isIOS  && {this.displayComponent()}   }
    </View >
  );
}


displayComponent() {
   return <iOSOnlyComponent> Hello, JSX! </iOSOnlyComponent>;
}

Upvotes: 5

Sujit.Warrier
Sujit.Warrier

Reputation: 2869

use conditional rendering.

 renderIosComp(){
    if(isIOS){   //use your variable here ideally props or state should be used
      return(<iOSOnlyComponent>
              .........
             ..........
            <iOSOnlyComponent />);
    }
    else{
         return(<div></div>);
    }
 }

call this inside your render method

render(){
   return(<div>  
         .......
         ......
          {this.renderIosComp()}
          </div>);
}

Upvotes: 0

Related Questions