1<img
2 src={this.state.photo}
3 alt=""
4 style={ isLoggedIn ? { display:'block'} : {display : 'none'} }
5/>
6
7// or
8
9<img
10 src={this.state.photo}
11 alt=""
12 style={ { display: isLoggedIn ? 'block' : 'none' } }
13/>
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}
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}
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}
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}
14
15const messages = ['React', 'Re: React', 'Re:Re: React'];
16ReactDOM.render(
17 <Mailbox unreadMessages={messages} />,
18 document.getElementById('root')
19);