Kevin Powell - Community•2w ago

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

12 Replies

ἔρως•2w ago

ἔρως•2w ago

your component receives an object with the properties you're just unpacking the object properties into variables https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring#object_destructuring look for this title:

Unpacking properties from objects passed as a function parameter

that's exactly what you're doing there

CDLOP•2w ago

ahhh.. ok yeah, I get it felt unnatural reading it at first but it kinda makes sense now

ἔρως•2w ago

it makes sense, if you need it as variables however, it can be a pain if you receive multiple attributes from the component for just a few (1-4), it may be a lot easier to use this but for more, it becomes cumbersome and just use the props however, the type checker may be more happy with the unpacked properties

CDLOP•2w ago

Thanks @ἔρως 😎

ἔρως•2w ago

just do what feels more natural you're welcome this is one of the cases where you can say "it's just javascript"

CDLOP•2w ago

I think him using onSelect is where my confusion is coming from. Makes more sense being onClick lol but I can see why he's doing it

ἔρως•2w ago

basically, it's being called "onSelect" because it's executed when the tab is selected which is implemented by adding a <button> with a click event and when's the tab is selected? when you click the button but that's mixing implementation details from the user side, it's just an event that runs when you select the tab

CDLOP•2w ago

Gotcha!

ἔρως•2w ago

makes more sense now?

CDLOP•2w ago

It does, thanks again 😄

ἔρως•2w ago

you're welcome

Gaming

Programming

Is this how Props work in React...?

Did you find this page helpful?