Custom component, single github user display

Displays a single github user

Related commits in repo

components\users\Useritem.js

 UserItem.js

import React, { Component } from 'react';

class UserItem extends Component {
   /* constructor(){//runs when component loads
        super();
        //console.log(123);
        this.state={
            //below details of url grablled from https://api.github.com/users
            id: 'id',
            login:'mojombo',
            avatar_url:'https://avatars0.githubusercontent.com/u/l?v=4',
            html_url: 'https://github.com/mojombo'
        }
    }*/

    state={
        //below details of url grablled from https://api.github.com/users
        id: 'id',
        login:'mojombo',
        avatar_url:'https://avatars0.githubusercontent.com/u/1?v=4',
        html_url: 'https://github.com/mojombo'
    };


    render() {
        const { login,avatar_url,html_url }= this.state;

        return (
            /*
            <div className="card text-center">
                <img src={this.state.avatar_url} alt="" className="round-img" style={{ width: '60px' }}/>
        <h3>{this.state.login}</h3>
        <div><a href={this.state.html_url} className="btn btn-dark btn-sm my-1">More</a></div>
            </div>
            */
           <div className="card text-center">
                <img src={avatar_url} alt="" className="round-img" style={{ width: '60px' }}/>
        <h3>{login}</h3>
        <div><a href={html_url} className="btn btn-dark btn-sm my-1">More</a></div>
            </div>
        )
    }
}

export default UserItem

index.js

import React,{Component} from 'react';
import logo from './logo.svg';
import Navbar from './components/layout/Navbar';
import UserItem from './components/users/UserItem';
import './App.css';

class App extends Component {
  render(){
    return(
      <div className="App">
        <Navbar/>
        <UserItem/>
      </div>
    );
  }
  
}

export default App;

Navbar.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
export class Navbar extends Component {
    static defaultProps = {
        title: 'Github Finder',
        icon: 'fab fa-github'
    };
       
    static propTypes={
        title: PropTypes.string.isRequired,
        icon: PropTypes.string.isRequired
    };
    render() {
        return (
            <nav className="navbar bg-primary">
                <h1>
                    <i className={this.props.icon}/>
        {this.props.title}
                </h1>
            </nav>);
    }
}

export default Navbar