Conditionals

Display comments conditionally

const showComments = true;

{showComments ? (
<div className='comments'>
  <h3>Comments {comments.length}</h3>
  <ul>
    {comments.map((comment, index) => (
      <li key={index}>{comment.text}</li>
    ))}
  </ul>
</div>
) : (
'There is no comment'
)}

If You don’t want to use else statement, use && instead of ?

{showComments && (
<div className='comments'>
  <h3>Comments {comments.length}</h3>
  <ul>
    {comments.map((comment, index) => (
      <li key={index}>{comment.text}</li>
    ))}
  </ul>
</div>
)}