Basically, I have a react component and its render()
function body is as follows: (This is my ideal component, which means it doesn't currently work)
render(){ return ( <div> <Element1/> <Element2/> // note: logic only, code does not work here if (this.props.hasImage) <ElementWithImage/> else <ElementWithoutImage/> </div> ) }
There is actually a way to do exactly what the OP asked for. Just render and call the anonymous function like this:
Not exactly the same, but there is a workaround. There is a section about conditional rendering in the React documentation that you should take a look at. The following is an example of what you can do using inline if-else.
You can also handle it inside the render function, but before returning jsx.
Also worth mentioning is what ZekeDroid brought up in the comments. If you are just checking a condition and don't want to render a specific piece of code that doesn't meet the condition, you can use the
&& operator
.