Presentational split

avatar.js

import React, { Component, PropTypes } from 'react';
import $ from 'jquery';

const BUMP_URL = (id) => `/bump/${id}`;

const Avatar = ({ name, avatar_url, onBump }) => (
  <div className="avatar image-link">
    <img src={avatar_url} title={name} />
    <span class="image-action" onClick={onBump}>Bump</span>
  </div>
);

Avatar.propTypes = {
  name: PropTypes.string.isRequired,
  avatar_url: PropTypes.string.isRequired,
  onBump: PropTypes.func.isRequired,
};
  

export default class BumpingAvatar extends Component {
  static props = {
    userId: PropTypes.string.isRequired,
  }
  
  bump() {
    $.ajax(BUMP_URL(this.props.userId), { type: post });
  }
    
  render() {
    return <Avatar {...this.props} onBump={() => this.bump()} />;
  }
}