How to change property of Instantiated component in react?

user_10607591 0
Viewed 31

Given the following code:

    export const AdmButton = ({icon,title,iconSize}) =>{
        return({icon} {title})

    buttondata.map((el, index) => {
     <AdmButton title={el.title} icon={el.icon} iconSize="3em"/>
    })
    

export const buttondata=[{
            title:'calc',
            icon: <ImIcons.ImCalculator size="2em"/>,
        },*/.../*
]

The AdmButton is by iteration created as many times as objects in buttondata. The object contains as icon the component from react-icons, in the example ImIcons.ImCalculator is being used. Now, this component has a property called size which I'd like to change depending the place the button is shown, but I don't find a way to refer to size (or another property) when the component is being called via object property. What's the right way to modify or overwrite a Property of a given component iterated this way?

reactjs
1 Answers

Instead of being a hard-coded component, the icon property in your object can be a function which generates a component. And that function can accept an argument:

icon: (size) => <ImIcons.ImCalculator size={size} />

Then in your AdmButton component you can invoke that function with the parameter:

return({icon(iconSize)} {title})

So each iteration when mapping will pass the parameter along and instantiate the icon on the fly.

Side note: Your call to .map() is missing the return in the callback, and as such currently won't render anything. Either include a return or remove the curly braces to make use of an implicit return.

user_3281930
Related