mulitiple user github display

 Instead of single user, showing multiple users, and separate component created for all users and single useritem.

Repo change 

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

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

export default App;

//UserItem.js
import React, { Component } from 'react';

class UserItem extends Component {
   

    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'
    };


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

        return (
           
           <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

//Users.js
import React, { Component } from 'react';
import UserItem from './UserItem';
class Users extends Component {
    state={
        users:[
            {
                id: '1',
                login: 'mojomo',
                avatar_url:'https://avatars0.githubusercontent.com/u/1?v=4',
                html_url: 'https://github.com/mojombo'
            },
            {
                id: '2',
                login: 'defunkt',
                avatar_url:'https://avatars0.githubusercontent.com/u/2?v=4',
                html_url: 'https://github.com/defunkt'
            },
            {
                id: '3',
                login: 'pjhyett',
                avatar_url:'https://avatars0.githubusercontent.com/u/3?v=4',
                html_url: 'https://github.com/pjhyett'
            }
        ]
    }
    render() {
        return (
            <div style={userStyle}>
                {this.state.users.map(user => (
                    //<div key={user.id}>{user.login}</div>
                    <UserItem key={user.id} user={user}/>
                ))}
            </div>
        )
    }
}
const userStyle ={
    display: 'grid',
    gridTemplateColumns: 'repeat(3,1fr)',
    gridGap: '1rem'
}
export default Users