I have an Avatar React ponent and there's an option to make it link to a profile or not. You may not want it to link to a profile if, say, your on the users profile and instead you want to do a custom clickHandler. Is there a nicer way other than just doing an if/else with basically identical HTML in each if and else other than a link? Below is some pseudo rendering code just to show an example of what I mean:

 <div className={"Avatar Avatar--" + this.props.size} onClick={this.props.clickHandler}>
    {if (this.props.link) { 
      <Link to="profile" params={{userId:this.props.user.id}}>
     }
    }

      <img className="__avatarimage" src={this.props.user.avatar} />

    {if (this.props.link) {
      </Link> 
     }
    }
  </div>

I have an Avatar React ponent and there's an option to make it link to a profile or not. You may not want it to link to a profile if, say, your on the users profile and instead you want to do a custom clickHandler. Is there a nicer way other than just doing an if/else with basically identical HTML in each if and else other than a link? Below is some pseudo rendering code just to show an example of what I mean:

 <div className={"Avatar Avatar--" + this.props.size} onClick={this.props.clickHandler}>
    {if (this.props.link) { 
      <Link to="profile" params={{userId:this.props.user.id}}>
     }
    }

      <img className="__avatarimage" src={this.props.user.avatar} />

    {if (this.props.link) {
      </Link> 
     }
    }
  </div>

• javascript
• syntax
• reactjs

Share Improve this question Follow edited Jan 31, 2016 at 5:12 Dmitry Shvedov 3,31644 gold badges4040 silver badges5656 bronze badges asked Nov 20, 2014 at 5:49 Oscar GodsonOscar Godson 32.8k4242 gold badges125125 silver badges206206 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Use:

<div className={"Avatar Avatar--" + this.props.size} onClick={this.props.clickHandler}>
{ this.props.link ?
  <Link to="profile" params={{userId:this.props.user.id}}>
    <img className="__avatarimage" src={this.props.user.avatar} />
  </Link>
  : <img className="__avatarimage" src={this.props.user.avatar} /> }

You can try to eliminate double definition of img by defining it earlier:

var img = <img className="__avatarimage" src={this.props.user.avatar} />;

and embed it using:

{img}

I'd create a function that either returns the image or the image wrapped in the link and then add it to the div.

var createAvatar = function() {
  if (this.props.link) {
    return <Link to="profile" params={{userId:this.props.user.id}}>
      <img className="__avatarimage" src={this.props.user.avatar} />
    </Link>;
  } else {
    return <img className="__avatarimage" src={this.props.user.avatar} />;
  }
};

var avatar = createAvatar();
return <div className={"Avatar Avatar--" + this.props.size} onClick={this.props.clickHandler}>
  {avatar}
</div>;