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) <ElementA/> else <ElementB/> </div> ) } 21 Answers
Not exactly like that, but there are workarounds. There's a section in React's docs about conditional rendering that you should take a look. Here's an example of what you could do using inline if-else.
render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> {isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> )} </div> ); } You can also deal with it inside the render function, but before returning the jsx.
if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; } return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> ); It's also worth mentioning what ZekeDroid brought up in the comments. If you're just checking for a condition and don't want to render a particular piece of code that doesn't comply, you can use the && operator.
return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div> ); 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> ) } 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> ); } Type 1: If statement style
{props.hasImage && <MyImage /> } Type 2: If else statement style
{props.hasImage ? <MyImage /> : <OtherElement/> } Four ways of conditional rendering
(In functional component's return statement or class component's render function's return statement)
Ternary operator
return ( <div> { 'a'==='a' ? <p>Hi</p> : <p>Bye</p> } </div> ) Note: Only if the condition
'a'==='a'is true,<p>Hi</p>will be rendered in the screen. Otherwise,<p>Bye</p>will be rendered on the screen.
Logical operator
AND &&
return ( <div> { 'a'==='a' && <p>Hi</p> } </div> ) Note: Only if the condition
'a'==='a'is true,<p>Hi</p>will be rendered in the screen.
OR ||
export default function LogicalOperatorExample({name, labelText}) { return ( <div> {labelText || name} </div> ) } Note: If
labelTextandnameboth props are passed into this component, thenlabelTextwill be rendered in the screen. But if only one of them (nameorlabelText) is passed as prop, then that passed prop will be rendered in the screen.
if, else, else if
return ( <div> { (() => { if('a'==='b') { return ( <p>Hi</p> ) } else if ('b'==='b') { return ( <p>Hello</p> ) } else { return ( <p>Bye</p> ) } })() } </div> ) Note: Have to use an anonymous functions (also need to immediately invoke the function )
Switch statement
return ( <div> { (() => { switch(true) { case('a'==='b'): { return ( <p>Hello</p> ) } break; case('a'==='a'): { return ( <p>Hi</p> ) } break; default: { return ( <p>Bye</p> ) } break; } })() } </div> ) Note: Have to use an anonymous functions (also need to immediately invoke the function)
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> ) } 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)
If you need more than one condition, so you can try this out
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> ); } } 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 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> } I used a ternary operator and it's working fine for me.
{item.lotNum == null ? ('PDF'):(item.lotNum)} None of the answers mention the short-circuit method
{this.props.hasImage && <MyImage />} Granted you cannot use it if you want to render something on the else logic. I learned about this on react by example
on a deeper scan I do see a comment by @ZekeDroid, but I will drop this as an answer since it could be useful.
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. :)
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
Lot's of great answers, however I haven't seen the use of an object for mapping to different views
const LOGS = { info: <Info />, warning: <Warning />, error: <Error />, }; const Notification = ({ status }) => <div>{LOGS[status]}</div> 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 /> )} I found that a solution that I thought was better than having an if-else. Instead have 2 return statements. See example:
render() { const isLoggedIn = this.state.isLoggedIn; if (isLoggedIn) { return <LogoutButton onClick={this.handleLogoutClick} /> } // This will never occur if the user is logged in as the function is returned before that. return <LoginButton onClick={this.handleLoginClick} /> } This is less cluttered than having an if-else or ternary operator in your return statement.
You can introduce separate method that will return div elements and call it inside of return. I use this case for example for error rendering depends on status, such as:
const renderError = () => { if (condition) return ....; else if (condition) return ....; else if (condition) return ....; else return ....; } render(){ return ( <div> .... {renderError()} </div> ); } Shorthand for if then
{ condition ? <Element1/> : null } I don't think i saw this solution for an inline else if rendering where you have more that 2 conditions so i'm sharing it :
{variable == 0 ? <Element1/> :variable == 1 ? <Element2/> :variable == 2 ? <Element3/> : <Element4/> } Below Code you can use for If condition on react in side return
{(() => {if (true) {return ( <div><Form> <Form.Group as={Row} style={{ marginLeft: '15px', marginRight: '15px', marginBlock: '0px' }} > <Form.Label className="summary-smmdfont" style={{ flex: '1 0 auto', marginBlock: '0px' }}> uyt</Form.Label> <Form.Label className="summary-smmdfont"style={{ textAlignLast: 'Right', flex: '1 0 auto', marginBlock: '0px' }}> 09</Form.Label> </Form.Group> </Form> </div>); }})()} 
