Seemingly random hydration mismatches

Hello! I'm super new to solid js and web frameworks in general

This is the code I use to check if a given server is online

        <p class="col-start-2 row-start-1 text-right mr-3">Status: {
          props.online ?
            (
              <div class="inline-flex gap-1">
                <span class="text-server-online">●</span>
                <span>Online</span>
              </div>
            ) :
            (
              <div class="inline-flex gap-1">
                <span class="text-server-offline">●</span>
                <span>Offline</span>
              </div>
            )
        }</p>

        <p class="col-start-2 row-start-1 text-right mr-3">Status: {
          props.online ?
            (
              <div class="inline-flex gap-1">
                <span class="text-server-online">●</span>
                <span>Online</span>
              </div>
            ) :
            (
              <div class="inline-flex gap-1">
                <span class="text-server-offline">●</span>
                <span>Offline</span>
              </div>
            )
        }</p>

And when I reload it, and only when I reload my webpage does it return a hydration mismatch. I only found out after making a commit.
This is the code that fixed it:

        {
          props.online ?
            (
              <p class="col-start-2 row-start-1">Status:
                <span class="text-server-online mx-1">●</span>
                <span>Online</span>
              </p>
            ) :
            (
              <p class="col-start-2 row-start-1">Status:
                <span class="text-server-offline mx-1">●</span>
                <span>Offline</span>
              </p>
            )
        }

        {
          props.online ?
            (
              <p class="col-start-2 row-start-1">Status:
                <span class="text-server-online mx-1">●</span>
                <span>Online</span>
              </p>
            ) :
            (
              <p class="col-start-2 row-start-1">Status:
                <span class="text-server-offline mx-1">●</span>
                <span>Offline</span>
              </p>
            )
        }

Then I tried copying the

div

div

from the old code into the

, to simulate that the that server is online.

I have a few questions:
- Why error on reload and not when it hot reloads/reloads by itself?
- Why arent

div

div

s allowed inside

s?

Again I only know enough html to make a couple side projects. I've never actually done anything like this before

GitHub

chore: text alignment n stuff · Kiwifuit/McManager@07109ab

SolidJS•2y ago•

5 replies

Misery

Seemingly random hydration mismatches

Hello! I'm super new to solid js and web frameworks in general

This is the code I use to check if a given server is online

        <p class="col-start-2 row-start-1 text-right mr-3">Status: {
          props.online ?
            (
              <div class="inline-flex gap-1">
                <span class="text-server-online">●</span>
                <span>Online</span>
              </div>
            ) :
            (
              <div class="inline-flex gap-1">
                <span class="text-server-offline">●</span>
                <span>Offline</span>
              </div>
            )
        }</p>

        <p class="col-start-2 row-start-1 text-right mr-3">Status: {
          props.online ?
            (
              <div class="inline-flex gap-1">
                <span class="text-server-online">●</span>
                <span>Online</span>
              </div>
            ) :
            (
              <div class="inline-flex gap-1">
                <span class="text-server-offline">●</span>
                <span>Offline</span>
              </div>
            )
        }</p>

And when I reload it, and only when I reload my webpage does it return a hydration mismatch. I only found out after making a commit.
This is the code that fixed it:

        {
          props.online ?
            (
              <p class="col-start-2 row-start-1">Status:
                <span class="text-server-online mx-1">●</span>
                <span>Online</span>
              </p>
            ) :
            (
              <p class="col-start-2 row-start-1">Status:
                <span class="text-server-offline mx-1">●</span>
                <span>Offline</span>
              </p>
            )
        }

        {
          props.online ?
            (
              <p class="col-start-2 row-start-1">Status:
                <span class="text-server-online mx-1">●</span>
                <span>Online</span>
              </p>
            ) :
            (
              <p class="col-start-2 row-start-1">Status:
                <span class="text-server-offline mx-1">●</span>
                <span>Offline</span>
              </p>
            )
        }

Then I tried copying the

div

div

from the old code into the

, to simulate that the that server is online.

I have a few questions:
- Why error on reload and not when it hot reloads/reloads by itself?
- Why arent

div

div

s allowed inside

s?

Again I only know enough html to make a couple side projects. I've never actually done anything like this before

GitHub

chore: text alignment n stuff · Kiwifuit/McManager@07109ab

Seemingly random hydration mismatches

Seemingly random hydration mismatches

Similar Threads

Similar Threads

Similar Threads