I have a User component:

import React, { Component } from 'react';

class User extends Component {

  render() {
    return(
      <div>
        <span className="user-name">{this.username}</span>
        <img src={this.profilePicture} />
      </div>
    )
  }
}

User.propTypes = {
  username: React.PropTypes.string.isRequired,
  profilePicture: React.PropTypes.string.isRequired
};

export default User;

Then I am using this component in my navbar component:

import React, { Component } from 'react';

import User from './User.component';

import mockProfilePicture from './mockProfilePicture.jpg';

class Navbar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        username: 'John',
        profilePicture: mockProfilePicture
      }
    }
  }

  renderUser = (user) => {
    return (
      <User username={user.username} profilePicture={user.profilePicture}/>
    )
  };

  render() {
    return(
      <div>
        {this.renderUser(this.state.user)}
      </div>
    )
  }
}

export default Navbar;

However instead of getting the username and the profile picture I am getting nothing (as if no data is being passed to the function).

What am I doing wrong