Лучший способ визуализации, если данные существуют или нет?

Question

У меня запущен запрос graphql, который загружает некоторые данные. Я передаю эти данные компоненту, а также передаю функцию, которую я сделал для проверки данных. Если часть данных существует, то рендерит переданный компонент, а если нет, то рендерит нулевой.

export const GET_VESSEL = gql`
  query vesselById($id: ID!) {
    vesselById(id: $id) {
      flagCode
      shipName
    }
  }
`;

const checkData = (data, component) => data ? component : null;

<div>
 {checkData(flagCode, <Flag code={`${flagCode}`} height="15" />)}
 {checkData(shipName, <p>${flagCode}</p>)}
</div>

Я хотел бы знать, есть ли более простой способ или это хороший способ сделать это? Или любые предложения.

Answer 1

Самое простое решение -

{flagCode && <Flag code={flagCode} height="15" />}
{shipName && <p>${flagCode}</p>}

Существуют ограниченные обстоятельства, когда требуется значение NULL, но ваш пример не является одним из них.

Answer 2

вы можете сделать это

const checkData = (data, component) => Boolean(data) ? component : null;