I have a notification component, and I have a timeout setting for it. after timeout I call this.setState({isTimeout:true}).
What I want to do is if already timeout, I want just render nothing:
render() {
let finalClasses = "" + (this.state.classes || "");
if (isTimeout){
return (); // here has some syntax error
}
return (<div>{this.props.children}</div>);
}
the problem is: return (); // here has some syntax error
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 undefinedare 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' />Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments