Why can't I show my solid-js button using the <Show> conditional method after I assign a value to my variable?

user_19841085 0
Viewed 45

I work in solid-js. I created in my project a url variable. My application must display a chat creation button to the user if the value does not the url variable exists and a message You cannot create a whelpschat if the variable has a null value. For this, I created a conditional structure in solid-js:

<Show when={open()}>

         <Show when={url()?.trim().length}>
              ...
           <CreateChat/>
             ...
         </Show>
         <Show when={!url()?.trim().length}>
                ...
         You cannot create a whelpschat 
             ...
         </Show>
</Show>

When I test, when the url variable has a null value, it displays the message You cannot create a whelpschat; but when I assign a value to the url variable for example banana, it always displays the message instead of the button. However, given that the variable does indeed have a non-zero value, it is the button that should normally have been displayed. I don't understand why this isn't working. I hope I can get help from more experienced members of the community. Thanks !

solid-js show javascript
2 Answers

Try using the fallback prop

The fallback on SolidJS is kind of like an else statement on plain js, whenever your condition is false it will always render the fallback, if the condition is true then it'll render all the children of the Show component

Instead of this

     <Show when={url()?.trim().length}>
          ...
       <CreateChat/>
         ...
     </Show>
     <Show when={!url()?.trim().length}>
            ...
     You cannot create a whelpschat 
         ...
     </Show>

Do this

     <Show when={url()?.trim().length}
       fallback={<p>You cannot create a whelpschat</p>}  
     >
          ...
       <CreateChat/>
         ...
     </Show>
user_110034960

Your rendering logic is wrong. You are rendering both the CreateChat component and the error component. To fix it, you can conditionally render components using a simple if statement in your JSX or use built in Show component with a fallback prop.

user_71341340
Related