How to pass props when a component is passed as a prop of another component?-CodePudding

I have a component as follows:

const ArrowDownIcon = (name:string) => (
  <MaterialCommunityIcons
    name={name}
    size={50}
    color={theme.colors.text}
  />
);

Then I should pass the above component as a prop to the following component:

const Dropdown = () =>{
  <DropDownPicker
    ArrowDownIconComponent={ArrowDownIcon}
  />
}

But it doesn't work, since I should pass the prop of name to the ArrowDownIconComponent. Can somebody please explain me how to do this please?

CodePudding user response：

Nothing wrong here, in DropDownPicker you just have to render your ArrowDownIconComponent

const DropDownPicker = ({ArrowDownIconComponent}) => (
  ...
  <ArrowDownIconComponent />
  ...
)

You can also use it this way

const Dropdown = () =>{
  <DropDownPicker
    arrowDownIconComponent={<ArrowDownIconComponent />}
  />
}


const DropDownPicker = ({arrowDownIconComponent}) => (
  ...
  { arrowDownIconComponent }
  ...
)

CodePudding user response：

you can pass the name as a prop in this way

<DropDownPicker
   ...
   ArrowDownIconComponent={() => <ArrowDownIconComponent name="box" />}
   ...
/>