1render () {
2 return (
3 <div>
4 {(() => {
5 if (someCase) {
6 return (
7 <div>someCase</div>
8 )
9 } else if (otherCase) {
10 return (
11 <div>otherCase</div>
12 )
13 } else {
14 return (
15 <div>catch all</div>
16 )
17 }
18 })()}
19 </div>
20 )
21}
22
1renderElement(){
2 if(this.state.value == 'news')
3 return <Text>data</Text>;
4 return null;
5}
6
7render() {
8 return (
9 <View style={styles.container}>
10 { this.renderElement() }
11 </View>
12 )
13}
1render() {
2 const isLoggedIn = this.state.isLoggedIn;
3 return (
4 <div>
5 The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in. </div>
6 );
7}
1if (coinToss() === 'heads') {
2 img = <img src={pics.kitty} />
3} else {
4 img = <img src={pics.doggy} />
5}
1const functionalComponent=()=> {
2
3 return (
4 <div>{
5 props.isFeatured ? (
6 <div className="featured_ovelay_icon">lol</div>
7
8 ) : ("")
9 }
10 </div>
11 );
12}
1import React, { Component } from 'react';
2
3// @params [] * denotes optional param (we will need to use conditional rendering for some of these)
4// [type](Bulma CSS class): Hero type, focuses on the base styling
5// size(Bulma CSS Class): The size of the hero, small, medium, large, etc...
6// heading: The main heading
7// [subheading]: The subheading if desired
8// [alignment](Bulma CSS Class): Aligns the content horizontally
9
10// This Simple HeroComponent is bases upon the following
11// https://bulma.io/documentation/layout/hero/
12
13export class HeroComponent extends Component
14{
15 render() {
16 return (
17 // The following ternary simply applies a class if it has been specified
18 <section className={"hero" + (this.props.type ? " " + this.props.type + " " : " ") + this.props.size}>
19 <div className="hero-body">
20 // Again, another ternary applying a class... blah blah blah....
21 <div className={"container" + this.props.alignment ? " " + this.props.alignment : ""}>
22 <h1 className="title">{this.props.heading}</h1>
23 // So, to answer the question...
24 // The following is one way to do conditional rendering, probably the simplest and cleanest
25 // If this.props.subheading exists, render <h2 .. />
26 {this.props.subheading && <h2 className="subtitle">{this.props.subheading}</h2>}
27 </div>
28 </div>
29 </section>
30 )
31 }
32}