diff --git a/src/App/components/ChannelCounterpartyData.tsx b/src/App/components/ChannelCounterpartyData.tsx
index b2a0a5c..e4455ed 100644
--- a/src/App/components/ChannelCounterpartyData.tsx
+++ b/src/App/components/ChannelCounterpartyData.tsx
@@ -11,8 +11,8 @@ export function CounterpartyData({ counterparty }: CounterpartyDataProps): JSX.E
   return (
     <div className="flex flex-col m-2 ml-0">
       <span className={style.subtitle}>Counterparty</span>
-      {counterparty?.portId ? <span>Port ID: {counterparty.portId}</span> : null}
-      {counterparty?.channelId ? <span>Channel ID: {counterparty.channelId}</span> : null}
+      {counterparty?.portId && <span>Port ID: {counterparty.portId}</span>}
+      {counterparty?.channelId && <span>Channel ID: {counterparty.channelId}</span>}
     </div>
   );
 }
diff --git a/src/App/components/ConnectionCounterpartyData.tsx b/src/App/components/ConnectionCounterpartyData.tsx
index 9b5c7ec..5e45de0 100644
--- a/src/App/components/ConnectionCounterpartyData.tsx
+++ b/src/App/components/ConnectionCounterpartyData.tsx
@@ -12,8 +12,8 @@ export function CounterpartyData({ counterparty }: CounterpartyDataProps): JSX.E
   return (
     <div className="flex flex-col m-2 ml-0">
       <span className={style.subtitle}>Counterparty</span>
-      {counterparty?.clientId ? <span>Client ID: {counterparty.clientId}</span> : null}
-      {counterparty?.connectionId ? <span>Connection ID: {counterparty.connectionId}</span> : null}
+      {counterparty?.clientId && <span>Client ID: {counterparty.clientId}</span>}
+      {counterparty?.connectionId && <span>Connection ID: {counterparty.connectionId}</span>}
       {counterparty?.prefix?.keyPrefix?.length ? (
         <span>Prefix: {toHex(counterparty?.prefix?.keyPrefix)}</span>
       ) : null}
diff --git a/src/App/routes/Acknowledgement/index.tsx b/src/App/routes/Acknowledgement/index.tsx
index 6748b03..33f6b66 100644
--- a/src/App/routes/Acknowledgement/index.tsx
+++ b/src/App/routes/Acknowledgement/index.tsx
@@ -38,9 +38,9 @@ export function Acknowledgement(): JSX.Element {
     <div className="container mx-auto flex flex-col">
       <Navigation />
       <span className={style.title}>Data</span>
-      {portId ? <span>Port ID: {portId}</span> : null}
-      {channelId ? <span>Channel ID: {channelId}</span> : null}
-      {sequence ? <span>Sequence: {sequence}</span> : null}
+      {portId && <span>Port ID: {portId}</span>}
+      {channelId && <span>Channel ID: {channelId}</span>}
+      {sequence && <span>Sequence: {sequence}</span>}
       {ackResponse?.acknowledgement ? (
         <div className="flex flex-col">
           <span>Proof: {ackResponse.proof?.length ? toHex(ackResponse.proof) : "–"}</span>
diff --git a/src/App/routes/Channel/ChannelData.tsx b/src/App/routes/Channel/ChannelData.tsx
index 2420f4a..858929c 100644
--- a/src/App/routes/Channel/ChannelData.tsx
+++ b/src/App/routes/Channel/ChannelData.tsx
@@ -27,8 +27,8 @@ export function ChannelData({ portId, channelId }: ChannelDataProps): JSX.Elemen
   return channelResponse?.channel ? (
     <div>
       <div className={style.title}>Data</div>
-      {portId ? <div>Port ID: {portId}</div> : null}
-      {channelId ? <div>Channel ID: {channelId}</div> : null}
+      {portId && <div>Port ID: {portId}</div>}
+      {channelId && <div>Channel ID: {channelId}</div>}
       <div>Proof: {channelResponse.proof?.length ? toHex(channelResponse.proof) : "–"}</div>
       <HeightData height={channelResponse.proofHeight} />
       <div className="flex flex-col">
diff --git a/src/App/routes/Commitment/index.tsx b/src/App/routes/Commitment/index.tsx
index 43ce00b..61225bb 100644
--- a/src/App/routes/Commitment/index.tsx
+++ b/src/App/routes/Commitment/index.tsx
@@ -39,9 +39,9 @@ export function Commitment(): JSX.Element {
     <div className="container mx-auto flex flex-col">
       <Navigation />
       <span className={style.title}>Data</span>
-      {portId ? <span>Port ID: {portId}</span> : null}
-      {channelId ? <span>Channel ID: {channelId}</span> : null}
-      {sequence ? <span>Sequence: {sequence}</span> : null}
+      {portId && <span>Port ID: {portId}</span>}
+      {channelId && <span>Channel ID: {channelId}</span>}
+      {sequence && <span>Sequence: {sequence}</span>}
       {commitmentResponse?.commitment ? (
         <div className="flex flex-col">
           <span>Proof: {commitmentResponse.proof?.length ? toHex(commitmentResponse.proof) : "–"}</span>
diff --git a/src/App/routes/Connection/ConnectionData.tsx b/src/App/routes/Connection/ConnectionData.tsx
index 8d8bc16..4caffdb 100644
--- a/src/App/routes/Connection/ConnectionData.tsx
+++ b/src/App/routes/Connection/ConnectionData.tsx
@@ -26,7 +26,7 @@ export function ConnectionData({ connectionId }: ConnectionDataProps): JSX.Eleme
   return connectionResponse?.connection ? (
     <div>
       <div className={style.title}>Data</div>
-      {connectionId ? <div>Connection ID: {connectionId}</div> : null}
+      {connectionId && <div>Connection ID: {connectionId}</div>}
       <div>Proof: {connectionResponse.proof?.length ? toHex(connectionResponse.proof) : "–"}</div>
       <HeightData height={connectionResponse.proofHeight} />
       <div className="flex flex-col">