CODEWITHSUNDEEP
reactjsecmascript-6
JuMoGar
JuMoGar

Reputation: 1760

{this.props.PROP} within a ClassName .- ReactJS

I have next code: 

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title text-center" style={STYLES.titleStyle}><span class="glyphicon glyphicon-align-justify"></span> {this.props.title}</h3>
    </div>
    <div class="panel-body" style={STYLES.contentStyle}>
        {children}
    </div>
</div>

And I want try to do this: (See glyphicon, line 3)

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title text-center" style={STYLES.titleStyle}><span class="glyphicon glyphicon-{this.props.MY-ICON}"></span> {this.props.title}</h3>
    </div>
    <div class="panel-body" style={STYLES.contentStyle}>
        {children}
    </div>
</div>

Is there any way to do this?. If so... How could I do this? Thank you.

Upvotes: 1

Views: 58

Answers (1)

Tyler Sebastian
Tyler Sebastian

Reputation: 9458

I usually have something like the following in my projects where I use icons

(the following is for Font Awesome, but just change fa to glyphicons and it'll be more or less correct)

export const Icon = (props: IconComponentProps) => {
    return <i className={ `fa fa-${props.icon} ${props.className}` } />;
};

You use it like

<Icon icon="check" className="green" />

producing

<i class="fa fa-check green"></i>

if you don't want to go that far and only really want it to work in this specific case, just pass an myIcon prop to the containing component and use className={ `glyphicon glyphicon-${this.props.myIcon}`}

Upvotes: 1

Related Questions