Let's say I have a component Parent

const Parent = () => {
 return (
  <>
   <ChildComponent icon={<Icon/>} />
  </>
)
};

And a component Child

const Child = ({ icon }) => {
 return (
 <>
  {icon}
 </>
)
} 

How do can I change the props for Icon, inside my Child component? I want to dynamically change the color of the icon, and that's done with a color prop on the Icon

CodePudding user response：

You could try this:

const Parent = () => {
  return (
    <>
      <ChildComponent Icon={Icon} />
    </>
  )
};

const Child = ({ Icon }) => {
  const props = {}
  return (
    <>
      <Icon {...props}/>
    </>
  )
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>