Is this how Props work in React...?

Max just blew my mind and I'm not sure if that's an inexperience thing my end, or if he's doing something wonky..

He's created a button with an onClick event in TabButton.jsx, that function takes children and onSelect as props, there's then a function in app.jsx, handleSelect that displays the output, and the component is in app.jsx as <TabButton onSelect={handleSelect}>Components</TabButton>

Am I going crazy here, or is this standard practise? lol - I removed some of the code in App.JSX as it wasn't relevant to the question

TabButton

export default function TabButton({ children, onSelect }) {

    return (
        <li>
            <button onClick={handleSelect}>{children}</button>
        </li>
    );
}

export default function TabButton({ children, onSelect }) {

    return (
        <li>
            <button onClick={handleSelect}>{children}</button>
        </li>
    );
}

App.jsx

function App() {
    function handleSelect() {
        console.log('Hello World! - selected!');
    }
    return (
<menu>
    <TabButton onSelect={handleSelect}>Components</TabButton>
    <TabButton>JSX</TabButton>
    <TabButton>Props</TabButton>
    <TabButton>State</TabButton>
</menu>
    );
}

function App() {
    function handleSelect() {
        console.log('Hello World! - selected!');
    }
    return (
<menu>
    <TabButton onSelect={handleSelect}>Components</TabButton>
    <TabButton>JSX</TabButton>
    <TabButton>Props</TabButton>
    <TabButton>State</TabButton>
</menu>
    );
}

Ἔ

ἔρως•4/19/25, 8:44 PM

Ἔ

ἔρως•4/19/25, 8:44 PM

your component receives an object with the properties

Ἔ

ἔρως•4/19/25, 8:44 PM

you're just unpacking the object properties into variables

Ἔ

ἔρως•4/19/25, 8:45 PM

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring#object_destructuring

Ἔ

ἔρως•4/19/25, 8:45 PM

look for this title:

Unpacking properties from objects passed as a function parameter

Ἔ

ἔρως•4/19/25, 8:45 PM

that's exactly what you're doing there

CDLOP•4/19/25, 8:46 PM

ahhh.. ok yeah, I get it

CDLOP•4/19/25, 8:47 PM

felt unnatural reading it at first but it kinda makes sense now

Ἔ

ἔρως•4/19/25, 8:47 PM

it makes sense, if you need it as variables

Ἔ

ἔρως•4/19/25, 8:47 PM

however, it can be a pain if you receive multiple attributes from the component

Ἔ

ἔρως•4/19/25, 8:48 PM

for just a few (1-4), it may be a lot easier to use this

Ἔ

ἔρως•4/19/25, 8:48 PM

but for more, it becomes cumbersome and just use the

Ἔ

ἔρως•4/19/25, 8:49 PM

however, the type checker may be more happy with the unpacked properties

CDLOP•4/19/25, 8:49 PM

Thanks @ἔρως

Ἔ

ἔρως•4/19/25, 8:49 PM

just do what feels more natural

Ἔ

ἔρως•4/19/25, 8:49 PM

you're welcome

Ἔ

ἔρως•4/19/25, 8:50 PM

this is one of the cases where you can say "it's just javascript"

CDLOP•4/19/25, 9:06 PM

I think him using onSelect is where my confusion is coming from. Makes more sense being onClick lol

CDLOP•4/19/25, 9:06 PM

but I can see why he's doing it

Ἔ

ἔρως•4/19/25, 9:07 PM

basically, it's being called "onSelect" because it's executed when the tab is selected

Ἔ

ἔρως•4/19/25, 9:08 PM

which is implemented by adding a with a click event

Ἔ

ἔρως•4/19/25, 9:08 PM

and when's the tab is selected? when you click the button

Ἔ

ἔρως•4/19/25, 9:08 PM

but that's mixing implementation details

Ἔ

ἔρως•4/19/25, 9:09 PM

from the user side, it's just an event that runs when you select the tab

CDLOP•4/19/25, 9:09 PM

Gotcha!

Ἔ

ἔρως•4/19/25, 9:10 PM

makes more sense now?

CDLOP•4/19/25, 9:11 PM

It does, thanks again

Ἔ

ἔρως•4/19/25, 9:11 PM

you're welcome