1render () {
2 return (
3 <div className="row">
4 { //Check if message failed
5 (this.state.message === 'failed')
6 ? <div> Something went wrong </div>
7 : <div> Everything in the world is fine </div>
8 }
9 </div>
10 );
11}
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}
1function Mailbox(props) {
2 const unreadMessages = props.unreadMessages;
3 return (
4 <div>
5 <h1>Hello!</h1>
6 {unreadMessages.length > 0 &&
7 <h2>
8 You have {unreadMessages.length} unread messages.
9 </h2>
10 }
11 </div>
12 );
13}
1
2render () {
3 return (
4 <div className="row">
5 { //Check if message failed
6 (this.state.message === 'failed')
7 ? <div> Something went wrong </div>
8 : <div> Everything in the world is fine </div>
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}