Why we use (null) while creating dropdown in react js? - reactjs

Question

if we have not put null then it gives parsing error.
render() {
return (
<div className="dropdown" style = {{background:"Red",width:"2000px"}} >
<div className="button" onClick={this.showDropdownMenu}> User Info</div>
{this.state.displayMenu ? (
<ul>
<li><a className="active" href="#Orders">Orders</a></li>
<li>Payment Details</li>
<li>Your Address</li>
<li>Profile</li>
<li>Activity</li>
<li>Setting</li>
<li>Log Out</li>
</ul>
):
(
null
)}
</div>
);
}

Answer 1

If you don't want to add null don't use ternary, you can do this:
render() {
return (
<div className="dropdown" style = {{background:"Red",width:"2000px"}} >
<div className="button" onClick={this.showDropdownMenu}> User Info</div>
{ this.state.displayMenu && (
<ul>
<li><a className="active" href="#Orders">Orders</a></li>
<li>Payment Details</li>
<li>Your Address</li>
<li>Profile</li>
<li>Activity</li>
<li>Setting</li>
<li>Log Out</li>
</ul>
)}
</div>
);
}

Answer 2

You should always return a value from an expression. Even if the value it's null. To avoid ternary operators when you have a boolean you could render like this
return condition && <JSX />

Answer 3

For the case that this.state.displayMenu is false, you return null to preventing a component from rendering. In your case it's explicitly set to null.
React docs: https://reactjs.org/docs/conditional-rendering.html#preventing-component-from-rendering
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.