Basically, I have a react component, its render()
function body is as below: (It is my ideal one, which means it currently does not work)
render(){
return (
<div>
<Element1/>
<Element2/>
// note: code does not work here
if (this.props.hasImage) <MyImage />
else <OtherElement/>
</div>
)
}
This question is related to
reactjs
If you need more than one condition, so you can try this out
https://www.npmjs.com/package/react-if-elseif-else-render
import { If, Then, ElseIf, Else } from 'react-if-elseif-else-render';
class Example extends Component {
render() {
var i = 3; // it will render '<p>Else</p>'
return (
<If condition={i == 1}>
<Then>
<p>Then: 1</p>
</Then>
<ElseIf condition={i == 2}>
<p>ElseIf: 2</p>
</ElseIf>
<Else>
<p>Else</p>
</Else>
</If>
);
}
}
You can also use conditional (ternary) operator inside conditional operator in case you have 2 different dependencies.
{
(launch_success)
?
<span className="bg-green-100">
Success
</span>
:
(upcoming)
?
<span className="bg-teal-100">
Upcoming
</span>
:
<span className="bg-red-100">
Failed
</span>
}
If you want a condition to show elements, you can use something like this.
renderButton() {
if (this.state.loading) {
return <Spinner size="small" spinnerStyle={styles.spinnerStyle} />;
}
return (
<Button onPress={this.onButtonPress.bind(this)}>
Log In
</Button>
);
}
Then call the helping method inside render function.
<View style={styles.buttonStyle}>
{this.renderButton()}
</View>
Or you can use another way of condition inside return.
{this.props.hasImage ? <element1> : <element2>}
You can render anything using the conditional
statement like if
, else
:
render() {
const price = this.state.price;
let comp;
if (price) {
comp = <h1>Block for getting started with {this.state.price}</h1>
} else {
comp = <h1>Block for getting started.</h1>
}
return (
<div>
<div className="gettingStart">
{comp}
</div>
</div>
);
}
May be I'm too late here. But I hope this would help someone. First separate those two elements.
renderLogout(){
<div>
<LogoutButton onClick={this.handleLogoutClick} />
<div>
}
renderLogin(){
<div>
<LoginButton onClick={this.handleLoginClick} />
<div>
}
Then you can call these functions from render function using if else statement.
render(){
if(this.state.result){
return this.renderResult();
}else{
return this.renderQuiz();
}}
This works for me. :)
If you want to use If, else if, and else then use this method
{this.state.value === 0 ? (
<Component1 />
) : this.state.value === 1 ? (
<Component2 />
) : (
<Component3 />
)}
The shorthand for an if else structure works as expected in JSX
this.props.hasImage ? <MyImage /> : <SomeotherElement>
You can find other options on this blogpost of DevNacho, but it's more common to do it with the shorthand. If you need to have a bigger if clause you should write a function that returns or component A or component B.
for example:
this.setState({overlayHovered: true});
renderComponentByState({overlayHovered}){
if(overlayHovered) {
return <overlayHoveredComponent />
}else{
return <overlayNotHoveredComponent />
}
}
You can destructure your overlayHovered from this.state if you give it as parameter. Then execute that function in your render() method:
renderComponentByState(this.state)
You should Remember about TERNARY operator
:
so your code will be like this,
render(){
return (
<div>
<Element1/>
<Element2/>
// note: code does not work here
{
this.props.hasImage ? // if has image
<MyImage /> // return My image tag
:
<OtherElement/> // otherwise return other element
}
</div>
)
}
I used ternary operator and it's working fine for me.
>
{item.lotNum == null ? ('PDF'):(item.lotNum)}
Try going with Switch case or ternary operator
render(){
return (
<div>
<Element1/>
<Element2/>
// updated code works here
{(() => {
switch (this.props.hasImage) {
case (this.props.hasImage):
return <MyImage />;
default:
return (
<OtherElement/>;
);
}
})()}
</div>
)
}
This worked for me and should work for you else. Try Ternary Operator
Type 1: If
statement style
{props.hasImage &&
<MyImage />
}
Type 2: If else
statement style
{props.hasImage ?
<MyImage /> :
<OtherElement/>
}
There actually is a way to do exactly what OP is asking. Just render and call an anonymous function like so:
render () {
return (
<div>
{(() => {
if (someCase) {
return (
<div>someCase</div>
)
} else if (otherCase) {
return (
<div>otherCase</div>
)
} else {
return (
<div>catch all</div>
)
}
})()}
</div>
)
}
Source: Stackoverflow.com