JSX中的条件渲染

Question

How can I do a conditional rendering with JSX?

for instance I have div here where I want to render the text "NO IDEA" if the value of the props in null otherwise render the props if its not equal to null.

For example:

<div>{ return this.props.date === null ? 'NO IDEA' : this.props.date }</div>

I tried this but it did not worked out. Any idea what am doing wrong here?

Thanks in advance!

Answer 1

您可以仅基于this.props.date使用三元运算符，因此您无需在此处返回

<div> {this.props.date === null ? 'NO IDEA' : this.props.date }</div>

Answer 2

First of all, you don't need to use return statement inside the expression block. Next thing, don't check just for null , it might be undefined rather:

<div>{ this.props.date ? this.props.date : 'NO IDEA' }</div> 

This simply checks if date is available / true parsed in boolean, then use true value else use false value.

Or, even in simpler syntax using || :

{ this.props.date || 'NO IDEA' }

This will render the date only if date value is true parsed in boolean otherwise it will render 'NO IDEA'.