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}
1// single prop
2propName={ condition ? something : somethingElse }
3propName={ condition && something }
4// multiple props
5{ ...( condition ? { ...setOfProps } : { ...setOfOtherProps })}
6{ ...( condition && { ...setOfProps })}
1render() {
2 const isLoggedIn = this.state.isLoggedIn;
3 return (
4 <div>
5 The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
6 </div>
7 );
8}
1render() {
2 return (
3 <View style={styles.container}>
4 {this.state.value == 'news'? <Text>data</Text>: null }
5 </View>
6 )
7}
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}
1function Mailbox(props) {
2 const unreadMessages = props.unreadMessages;
3 return (
4 <div>
5 <h1>Hello!</h1>
6 {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div>
7 );
8}
9
10const messages = ['React', 'Re: React', 'Re:Re: React'];
11ReactDOM.render(
12 <Mailbox unreadMessages={messages} />,
13 document.getElementById('root')
14);