Using parameter and variable in function arguments in reactjs

Question

I have a function type react component:

function Card(props, {icon}) {
    return (
        <div className="card">
            <FontAwesomeIcon icon={icon} className="icon"/>
            <h3 className="text">{props.name}</h3>            
        </div>
    )
}

and I want to have 2 attributes for it: name and icon But to display the name in my title I need to use the props.name but the icon is just an attribute. When I pass the arguments like that I only get the name, and if I only pass the icon, I'm able to get the icon, but I can't manage to have them both. (The icon is a Fontawesome component).

I'm calling it in my App.js like this:

<Card name="Folder" icon="folder"/>

How can I make this work?

Paul McLoughlin · Accepted Answer · 2020-05-07 12:13:20Z

1

<Card name="Folder" icon="folder"/>

Your props object now looks like

const props = {
   name: "Folder",
   icon: "folder",
}

we can then use object destructuring when we pass it into our component.

function Card({icon, name}) {
    return (
        <div className="card">
            <FontAwesomeIcon icon={icon} className="icon"/>
            <h3 className="text">{name}</h3>            
        </div>
    )
}

edited May 7, 2020 at 12:13

answered May 7, 2020 at 12:11

Paul McLoughlin

2,2892 gold badges20 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul McLoughlin Over a year ago

Excellent, be sure to make it as the answer.

Collectives™ on Stack Overflow

Using parameter and variable in function arguments in reactjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related