Pass component as an argument to another component

In React, JSX components are not typically passed directly as arguments to a function in the same way you might pass a primitive value or an object. Instead, you can achieve a similar effect by passing components as props to another component.

Examples

Demo - Pass components as an argument

// Passing 1 components.
function Kiwi() {
    return (<span>Kiwi</span>);
}

function OneFruit({content}) {
    return (
        <div>The best fruit is {content} </div>
    )
}

// Passing multiple components.
function Coconut() {
    return (<span>Coconut</span>);
}
function MultipleFruits({contents}) {
    return (
        <>
            <div>Fruits I love are:</div>
            <ul>
                {
                    contents.map((Comp, index) => (
                        <li key={index}>{Comp}</li>
                    ))
                }
            </ul>
        </>
        
    )
}

// Create a page to display the results.
export default function PassComponentAsArgPage() {
    return (
        <>
            <OneFruit content={<Kiwi/>}/>
            <MultipleFruits contents={ [<Kiwi/>, <Coconut/>] }/>
        </>
    );
}