Pass props to a child component in React

Question

I am creating a react functional component in which I want to display an icon.

function Item(props) {
    return ({props.icon});
}

and I display it like this -

<Item icon={<FaIcon />} />

Is there a way to pass in props to the icon from the Item component?

Something like this -

function Item(props) {
    return ({props.icon(props: {})});
}

Answer 1

Just render it like any other component

first you need to send the raw component as a prop

<Item icon={FaIcon} />

Then you render it like a component

function Item(props) {
    return (<props.icon /* Here goes the props */ /> );
}