Kevin Powell - CommunityKP-C
Kevin Powell - Community•9mo ago•
28 replies
CDL

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


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>
    );
}
Was this page helpful?