Passare un componente come prop in React

In React abbiamo le cosidette props, che possono essere usate in molti modi, e risultano molto comode.

Qui sotto un esempio di codice in cui passiamo un componente JSX come prop ad un altro componente.

In questo esempio ho messo il codice tutto insieme per velocità:

import React from 'react';

interface MyCompProps {
    nav: React.ReactNode;
    children: React.ReactNode;
}

const MyComp = (props: MyCompProps) => {
    return (
        <>
            <nav>{props.nav}</nav>
            <main>{props.children}</main>
        </>
    );
}

function App() {
    return (
        <div className="App">
            <MyComp nav={<h1>TITOLO</h1>}>
                <div>CIAO DAL MIO COMPONENTE!</div>
            </MyComp>
        </div>
    );
}

export default App;

Volendo potremmo passare anche un intero componente, o anche un tag.

O ci sono anche altri modi più complessi (le soluzioni sono anche troppe...).

Ma ho trovato che passare JSX è la cosa che mi è venuta più comoda.

Enjoy!