Tengo un componente de usuario:

 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;

Luego estoy usando este componente en mi componente de barra de navegación:

 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;

Sin embargo, en lugar de obtener el nombre de usuario y la imagen de perfil, no obtengo nada (como si no se pasaran datos a la función).

Qué estoy haciendo mal