Playing with ReactJS

PlaygroundJs.jsx

function Button (props) {
  // Returns a DOM element here. For example:
  return <button type="submit">{props.label}</button>;
}

function ProfilePic(props) {
	return (
  	<img src={props.url} />
  );
}

function ProfileLink(props) {
	return (
  	<a href={props.url}>
      {props.url}
    </a>
  );
}

class Avatar extends React.Component {

	constructor() {
  	super();
    this.state = {
    	gitHubData: []
    }
    
  }
	componentDidMount() {
  	fetch('https://api.github.com/users/' + this.props.username)
    	.then(res => res.json())
      .then(json => {
      	this.setState({ gitHubData: json });
      });
  }
	render() {  
  	const user = this.state.gitHubData;
  	return (
    	<div>
        <ProfilePic url={user.avatar_url} />   
        <p><ProfileLink user={user.url} /></p>
        <p><b>Name:</b>  {user.name}</p>
        <p><b>Company:</b>  {user.company}</p>
        <p><b>Blog:</b>  {user.blog}</p>
        <p><b>Bio:</b></p>
        <i>{user.bio}</i>
        
      </div>
    );
  }
};



ReactDOM.render(<Avatar username="JoseGonzalez321" />, mountNode)