SolidJSS
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>

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>
            )
        }

Then I tried copying the div from the old code into the p, 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 divs allowed inside ps?

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
chore: text alignment n stuff · Kiwifuit/McManager@07109ab
Was this page helpful?