CODEWITHSUNDEEP
javascriptreactjs
SuPythony
SuPythony

Reputation: 925

Pass props to a child component in React

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

Upvotes: 5

Views: 3258

Answers (2)

Farhad Rad
Farhad Rad

Reputation: 577

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} />

Upvotes: 0

pablo henrique
pablo henrique

Reputation: 342

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

Upvotes: 4

Related Questions