How to check boolean values in React code and tips for conditional rendering
7 replies
Last updated: Aug 24, 2022
Z
I have a boolean set up in my schema type for certain blog posts - If I want to determine in my react code whether or not this boolean is true or false, how might I go about checking it to put out one message vs another?
Aug 24, 2022, 10:30 PM
What context are you using it?
One option is to use and if statement:
In React, you can conditionally show things like this:
or
One option is to use and if statement:
if (booleanSchema) {
//do something if booleanSchema is true
} else {
//do something if booleanSchema is false
}{ booleanSchema && <YourComponent> }{
booleanSchema ? <YourComponent> : <YourOtherComponent
}Aug 24, 2022, 10:40 PM
V
Two separate notes that might come up as well, when evaluating
Appearing when defined:
Truthy/falsy:
Source: https://www.sanity.io/docs/boolean-type
Appearing when defined:
New documents are created without schema-defined fields. This means that a boolean field in your schema will not immediately result in documents containing the boolean key. The key must be assigned a value for it to appear in a document. Make sure your front-end code treats a missing boolean value as false.
Truthy/falsy:
In GROQ you can handle missing booleans and false values equally like this *[_type == 'story' && featured != true] which would match stories where featured is false or missing (or to be fair, any other value that is not true).
Source: https://www.sanity.io/docs/boolean-type
Aug 24, 2022, 10:44 PM
Z
Thanks both of you, the ? : worked here - I had actually made a mistake earlier in my code which is why it wasn't working initially. Thank you!
Aug 24, 2022, 10:48 PM
V
You may already be aware, but in case you're like me and still relatively new to all this, that middle alternative of
means "I only care if this is true, otherwise disregard"
Sometimes you're just looking for a defined type, or the existence of a value (or its length) and if it isn't there, you'd rather it not mount at all, or for the code not to bother.
I use it all the time because the situation comes up all the time and it feels silly to write
x + y = z ? "Do stuff" : ""
or
x + y = z ? "Do stuff" : null
I used to get annoyed in vanilla JavaScript when it would bend over backwards trying to use one of my variables when there was nothing there, and having to write things like
typeof(myThing) !== "undefined" is just a mess to look at haha
I just used the convention today multiple times to do conditional form fields. There
isn't a false value. I just want it to exist or not exist 😃
{ booleanSchema && <YourComponent> }Sometimes you're just looking for a defined type, or the existence of a value (or its length) and if it isn't there, you'd rather it not mount at all, or for the code not to bother.
I use it all the time because the situation comes up all the time and it feels silly to write
x + y = z ? "Do stuff" : ""
or
x + y = z ? "Do stuff" : null
I used to get annoyed in vanilla JavaScript when it would bend over backwards trying to use one of my variables when there was nothing there, and having to write things like
typeof(myThing) !== "undefined" is just a mess to look at haha
I just used the convention today multiple times to do conditional form fields. There
isn't a false value. I just want it to exist or not exist 😃
Aug 24, 2022, 11:00 PM
Z
Thank you for including the extra information! I'm certain that will help me in the future. I'm just trying to see how all of this works right now. It's exciting because making mistakes is really showing me how all of this works
Aug 24, 2022, 11:12 PM
Z
user S
Aug 24, 2022, 11:13 PM
V
Quite welcome! I have spent the past year making almost every mistake so I can be a good resource! I promise that if you stick with it, it will be worth it. I just spent the last day building a surprise thing in a rush (I got told about a last minute deadline we needed to hit that was unknown) and these sorts of tools enabled me to jus burn through it. Iterate on the work I'd already done to just make new stuff, and have it work and work well.
Getting to manifest ideas and bang out new versions quickly without being impeded feels like what I think the dev experience was
meant to be all along but it's like it's only now getting there for real.
Getting to manifest ideas and bang out new versions quickly without being impeded feels like what I think the dev experience was
meant to be all along but it's like it's only now getting there for real.
Aug 24, 2022, 11:18 PM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.