React JS - скрыть описание div, если не сдана соответствующая карта

Question

Ответ на вопрос: я пытаюсь реализовать этот метод активации div в зависимости от того, сдана карта или нет. Таким образом, план состоит в том, что в div будет описание SpellDescription, и если количество карт будет больше 0 (есть только одна карта на каждой карте), то div будет отображаться. Я собирался взять этот пример:

const Home = ({ posts }) => {
  return (
    <div>
      {(() => {
        if (posts) {
          return <Posts posts={posts} />;
        } else {
          return <NoPosts />;
        }
      })()}
    </div>
  );

...... и затем переключить его на что-то вроде этого:

const Awaken = ({ awakenCount }) => {
  return (
    <div>
      {(() => {  {awakenCount && <Posts awakenCount={awakenCount}>{
    <strong>Awaken:  </strong><p>Choose a player, they discard 2 ingredients of their choice.</p>
    }</Posts>
      }  {
        !awakenCount && <NoPosts />
      };
    })

  }</div> );
}

Я получаю всевозможные ошибки о это. Не совсем уверен, что я должен поместить в «Записи» или где должны заканчиваться {s и (s). Иногда сообщения появляются как неопределенные, иногда нет. Это лучше, чтобы быть в функции или вне функции? это оба пути.

Кстати, моя игра будет работать без этого кода, однако она будет работать, только если есть дополнительный символ "}, который подсвечивает код VS красным цветом. Так что, возможно, это может быть проблемой тоже.

Я вызываю функцию в ответе:

return (
<Awaken>
  <Posts/>
  <NoPosts/>
</Awaken>
)

Answer 1

Вы должны написать это так:

const Awaken = ({ awakenCount }) => {
  return (
    <div>
      {awakenCount && 
         <Posts awakenCount={awakenCount}>
           <strong>Awaken:  </strong><p>Choose a player, they discard 2 ingredients of their choice.</p>
         </Posts>}
      {!awakenCount && <NoPosts />}
  </div>);
}

, а затем просто использовать это так:

<Awaken awakenCount={2} />

Надеюсь, это поможет.