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