ReactJS - Komponente vorbei this.state.object nicht richtig an eine andere Komponente

Question

ich eine Benutzerkomponente:

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; 

Dann bin ich diese Komponente in meine navbar Komponente:

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; 

jedoch statt um den Benutzernamen und das Profilbild zu erhalten bekomme ich nichts (so als ob keine Daten an die Funktion übergeben werden).

Was bin ich falsch

Answer 1

oder besser - es hat eine grundlegende staatenlos Komponente machen:

const User = ({username, profilePicture}) => (
    <div> 
     <span className="user-name">{username}</span> 
     <img src={profilePicture} /> 
    </div> 
) 

Answer 2

Um tun, um Zugang Requisiten bestanden, müssen Gebrauch this.props verwenden:

class User extends Component { 

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