Условный рендеринг объекта, если он определен, жалуется, если он не определен

Question

Я хочу использовать объект, только если он определен, он жалуется, когда объект не определен (и не используется). Почему он жалуется, если его не используют? Как решить?

const User = (props) =>
  {

const auser=props.user


    return (

<div>
if(auser)
  {    <div><h1>{auser.name}</h1>
    <h2>added blogs</h2>

{auser.blogs.map((it)=>(<div>{it.title}</div>))}
    </div>
}
</div>

    )

Answer 1

Вы не можете использовать if внутри оператора возврата. Для создания встроенного оператора if / else следует использовать оператор ? :

return (
  <div>
  auser ? (
    <div><h1>{auser.name}</h1>
      <h2>added blogs</h2>

      {auser.blogs.map((it)=>(<div>{it.title}</div>))}
    </div>
  ) : ""
  </div>
)