My thing works and I need to know why!

[candid crest]

Yes, you read the title right. My thing is working and I have absolutely no idea why -- I've been dying laughing experimenting with new things and it finally works. I then delved into the code and realized I don't know enough about the intricacies of ES6 to really understand what is happening. But I want to understand what is happening here very badly.

I'm on section 3 of the react basics code working on ternarys. As I have a good amount of dev experience in other languages, I decided to take the I go out lesson and make the entire functionality only using one ternary in the actual logic - just as a personal challenge. I got it to work but really for the life of me cannot understand why THIS works. I tried so many different things and just as I was about to give up on my personal mission (write multiple ternarys, or... gasp write an actual if else statement) I decided to try one more thing. The results confused me, shocked me, and just made me laugh. Anyways, here is the code. Someone please explain why this works as expected

Just a note, IGO is my notation for I go out. Thanks in advance!

<!DOCTYPE javascript>

import React from "react"

export default function App() {
    
    const [IGO, setIGO] = React.useState(true)
    
    function handleIGO(){ 
        setIGO(        
            IGO===false     
        ) 
    }   
    return (
        <div className="state">
            <h1 className="state--title">Do I feel like going out tonight?</h1>
            <div className="state--value" onClick={handleIGO}>
                <h1>{IGO ? "Yes":"No"}</h1>
            </div>
        </div>
    )
}

[low quartz]

So, in terms of the ternary, the part before the question mark is a boolean statement. When it evaluates to true, the element on the left of the colon is returned. When it evaluates to false, the element on the right of the colon is returned.

In your program, IGO is initially set to true, but when you click that div, it calls your handleIGO function and sets IGO to false. You should see the value in your h1 change from 'Yes' to 'No' because the value of IGO changes from true to false.

[candid crest]

Yes. And when its set to No and I click it, it sets it to yes/true. Why is my code working, it doesnt look like it should work.

I need to know why this code works!

[low quartz]

Ah, I see

I know

[candid crest]

I really don't understand much about ES6, but I don't think this would work if translated to another language

[low quartz]

when you call setIGO in your handleIGO function, you are passing it IGO===false

So when IGO is equal to true, this evaluates to false. When IGO is equal to false, this evaluates to true (as false===false)

[candid crest]

LOL

that makes sense, but also makes zero sense

im not crazy right? from the little I know about JS, this feels like this wouldnt really work in say... any other programming language

obviously i havent tried it, im 75% PHP fluent and i dont think this would work there, i think it would continue to return false

[low quartz]

Hmmm. I'm not entirely sure. And state is still sitting a little funky in my head. But if you wrote this in say, python (isIGO==false) the logic still works, as long as you have something that calls and updates it.

[candid crest]

odd. other than being contextually confusing, is there anything wrong with programming this way? honestly, im a fan of how simple and clean it is, although its contextually very confusing. coding it out would be considered better practice... is there any technical reason why coding this way is bad though?

[low quartz]

You could make an argument that it isn't as readable as other answers. Like, instead of this, you could write it out as a if/else. (if (IGO == true) {setIGO(false)} ...etc. That would be more readable. But honestly, I think the way you did it is fine.

[candid crest]

ok! well thanks so much for the help... it makes sense now just is a bit odd. have a good one!

[low quartz]

I think you can also do it like this: setIGO(!IGO)

If you wanna feel more confused again

Good luck with the rest of the react course!

[young hamlet]

The way you wrote the code makes a perfect and clear sense. I'd argue that you are not 100% consistent in your code formatting and I favor using semicolons; both attributes which support code readability and so are a part of good quality code (if we are of different thought school on the semicolons, then the code formatting should be true anyway).

The only thing I don't get is the <!DOCTYPE javascript> line at the beginning. That should represent what? I've never seen that.

btw this works also in PHP if that was your question why the === expression works / flips the boolean value:

<?php
$first = true === false;
$second = false === false;

var_dump($first); // bool(false)
var_dump($second); // bool(true)

[candid crest]

The doctype thing is a purely discord thing, it’s supposed to highlight your code but it didn’t really work.

Thanks for the feedback! Yea this was part of a lesson, I normally don’t pay super close attention to best practice, like keeping semicolons uniform or anything. I would never name any of my variables IGO, especially not without comments. Maybe I should practice best practices when coding inside of these environments, explaining everything with comments and naming all variables properly, organizing with proper space, all of that. I’d argue no - that switch can always be turned on or off, I’m not learning coding best practice, I’m learning react functionality. That’s an argument for a different day I suppose but again I’d argue no on that front.

Thanks for the review and thoughts! If there’s anything else let me know. Have a good one 🙂

[rose fulcrum]

hey just getting on this... question though.. what exactly does your handleIGO() do exactly?

[young hamlet]

The doctype thing is a purely discord thing, it’s supposed to highlight your code but it didn’t really work.

For code highlighting on discord you can use three backticks ` to surround your code, and optionally specifying language type, like so:

'''js
...js code...
'''

I've used single quotes instead of the backtick to make it show...

Thanks for the feedback! Yea this was part of a lesson, I normally don’t pay super close attention to best practice, like keeping semicolons uniform or anything. I would never name any of my variables IGO, especially not without comments. Maybe I should practice best practices when coding inside of these environments, explaining everything with comments and naming all variables properly, organizing with proper space, all of that. I’d argue no - that switch can always be turned on or off, I’m not learning coding best practice, I’m learning react functionality. That’s an argument for a different day I suppose but again I’d argue no on that front.

Sure, the "IGO" isn't ideal, and in terms of best practices, rather than adding lots of comments, I'd say it's better to use selfdescribing variable/function names. Also I'd like to add, the code formatting isn't terrible at all, only at few occasions off imo. I mentioned the whole formatting thing because I think I saw somewhere mentioning something like "if it is a good code" or in that sense. And besides proper functionality, proper code formatting is of the same part of that concept as well.

Thanks, you have a good one too! 🙂