Pass props to a child component in React

user_14078826 0
Viewed 1847

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: {})});
}
reactjs javascript
2 Answers

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 */ /> );
}
user_80274400

You could also use props.children like this:

function Item(props) {
    return (<>{ props.children }</>);
}

<Item>
   <FaIcon /* child props over here */ />
<Item>

But this only sets props from where component is called and not within the parent component Item. If you exactly want to set props within Item component the best answer would be the same as what @pablo-henrique said:

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

<Item icon={FaIcon} />
user_164841000
Related