Is it possible to return empty in react render function?
Yes you can, but instead of blank, simply return null
if you don't want to render
anything from component, like this:
return (null);
Another important point is, inside JSX if you are rendering element conditionally, then in case of condition=false
, you can return any of these values false, null, undefined, true
. As per DOC:
booleans (true/false), null, and undefined
are valid children, they will be Ignored means they simply don’t render.
All these JSX
expressions will render to the same thing:
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>
Example:
Only odd values will get rendered, because for even values we are returning null
.
const App = ({ number }) => {
if(number%2) {
return (
<div>
Number: {number}
</div>
)
}
return (null); //===> notice here, returning null for even values
}
const data = [1,2,3,4,5,6];
ReactDOM.render(
<div>
{data.map(el => <App key={el} number={el} />)}
</div>,
document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app' />
Yes you can return an empty value from a React render method.
You can return any of the following: false, null, undefined, or true
According to the docs:
false
,null
,undefined
, andtrue
are valid children. They simply don’t render.
You could write
return null; or
return false; or
return true; or
return <div>{undefined}</div>;
However return null
is the most preferred as it signifies that nothing is returned
Some answers are slightly incorrect and point to the wrong part of the docs:
If you want a component to render nothing, just return null
, as per doc:
In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return null instead of its render output.
If you try to return undefined
for example, you'll get the following error:
Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
As pointed out by other answers, null
, true
, false
and undefined
are valid children which is useful for conditional rendering inside your jsx, but it you want your component to hide / render nothing, just return null
.
EDIT React 18:
React 18 will allow rendering undefined
instead of throwing. See this announcement.