Conditional rendering with reactjs

Question

I want to add a div to my render objects depending on a condition. Right now I am using this code

render() {
 return (
 <div>
 {this.test === this.someValue ? <div> some view </div> : <div> /div>}
 ...... // other components
 </div>
 )
}

this is working but I don't like the : <div> /div> because I don't need it. Is there any way to just use an if instead of if else?

• Martin Shishkov: you can return a null instead of an empty div as well
• Ajay Gaur: I would rather suggest you to go for the recompose's branch. Have a look at it here : github.com/acdlite/recompose/blob/master/docs/API.md#branch

Answer 1

You can also use only the first condition and return your desired component right away since JavaScript has short-circuit evaluation.

render() {
 return (
 <div>
 {this.test === this.someValue && <div> some view </div>}
 ......
 </div> 
 )
}

• bluesixty: Here is a link to the react docs that outline all the conditional rendering schemes. reactjs.org/docs/conditional-rendering.html

Answer 2

Instead of returning an empty div just because you have to have a second condition, you could return null instead like

render() {
 return (
 <div>
 {this.test === this.someValue ? <div> some view </div> : null}
 ...... // other components
 </div>
 )
}