Within React, how to have a variable within a variable?

Question

I have the following:

      <MenuItem
        primaryText={currentUserProfile.displayName || currentUserProfile.email}
        onTouchTap={this.handleTouchTap}
        leftIcon={<DropDownArrow color={textColor}/>}
        rightIcon={<img src="{currentUserProfile.displayName}" alt="Me" />}
        style={{color: textColor}}
      />

The rightIcon is not working as it is already within a {} --- how do I get a variable to work within a {}?

is that the right way to do it or a hack? just want to learn correctly... — AnApprentice
– AnApprentice, Commented Jun 25, 2017 at 16:52
Wait, I don't think I read the question right. Are you saying the src variable isn't working? — Andrew Li
– Andrew Li, Commented Jun 25, 2017 at 16:58
the issue is I can't get rightIcon to render as desired, here is what is happening on the browser: <img src="{currentUserProfile.displayName}" alt="Me" color="#757575" style="height: 24px; width: 24px; display: block; position: absolute; top: 0px; margin: 12px; right: 4px;"> — AnApprentice
– AnApprentice, Commented Jun 25, 2017 at 16:59

vee_ess · Accepted Answer · 2017-06-25 17:00:17Z

2

You are specifying your URL as "{currentUserProfile.displayName}" as a string literal. You should be using rightIcon={<img src={currentUserProfile.displayName} alt="Me" />}

EDIT: Notice your quotation marks.

answered Jun 25, 2017 at 17:00

vee_ess

6995 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Within React, how to have a variable within a variable?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related