[FIXED] How to get all props from a component that is being passed as a prop?

Issue

I have this component called SpecialComp that is being passed as a prop to MyComp . My question is how to pass all of the props from SpecialComp (color, size, weight) to MyComp so then I can override the attributes set in MyComp? In other words how can I have access to SpecialComp’s props inside of MyComp?

<MyComp customcomp ={<SpecialComp color=‘green’ size=‘20’ weight=‘bold’/>} />

export const MyComp = ({customcomp}) => {
  return (
    <div>
    {React.cloneElement(customcomp, {color: ‘red’})}
    </div>
  );
}

Solution

You can simply access the props by calling customcomp.props.

<MyComp
    customcomp={<SpecialComp color="green" size="20px" weight="bold" />}
  />

---

const MyComp = ({ customcomp }) => {

  console.log(customcomp.props);
  //Prints: {color: "green", size: "20px", weight: "bold"}

  return <div>{React.cloneElement(customcomp, { color: "red" })}</div>;
};

export default MyComp;

codeSandbox for this here.

Answered By - Tehila
Answer Checked By - - Clifford M. (ReactFix Volunteer)