Conditions (React)
Estimated reading time: 3 minutesinside render if/else
import React, { Component } from 'react';
class MyComponent extends Component {
render (){
let myStatus;
if (2 == 2) {
myStatus = (
<span>
<h2>Welcome To code4mk.org</h2>
</span>
)
} else {
myStatus = (
<h2>Join with code4mk.org</h2>
)
}
return(
<div>
<h1>Your status</h1>
{ myStatus }
</div>
)
}
}
clean render if/else
import React, { Component } from 'react';
class MyComponent extends Component {
myStatusList() {
if (2==2) {
return (
<span>
<h2>Welcome To code4mk.org</h2>
</span>
);
} else {
return (
<h2>Join with code4mk.org</h2>
);
}
}
render (){
return(
<div>
<h1>Your status</h1>
{ this.myStatus() }
</div>
)
}
}
if/else es6
if/else condition inside render
<div>
{(() => {
if (2==3) {
return (
<span>
<h2>Welcome To code4mk.org</h2>
</span>
);
} else {
return (
<h2>Join with code4mk.org</h2>
);
}
})()}
</div>
switch inside render
<div>
{(() => {
switch('test') {
case 'info':
return (
<h1> info</h1>
)
case 'warning':
return (
<h1> warning</h1>
)
case 'error':
return (
<h1> error</h1>
)
default:
return (
<h1> default</h1>
)
}
})()}
</div>
ternary operator inline
ternary condition 2==2 ? 'number is 2' : 'Number isn't 2
import React, { Component } from 'react';
class MyComponent extends Component {
render (){
return(
<div>
<h1>My Super React App</h1>
{ 2==2 ?
<span>
<h2>Welcome To code4mk.org</h2>
</span>
:
<h2>Join with code4mk.org</h2>
}
</div>
)
}
}
- http://devnacho.com/2016/02/15/different-ways-to-add-if-else-statements-in-JSX/