Adding data from github api

 commit id

//User.js
import React, { Component } from 'react';
import UserItem from './UserItem';
class Users extends Component {
    
    render() {
        return (
            <div style={userStyle}>
                {this.props.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

//UserItem.js
import React from 'react';
import PropTypes from 'prop-types';

const UserItem = ({user:{ login,avatar_url,html_url }}) => {
   
        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>
        );
    
}

UserItem.propTypes={
    user: PropTypes.object.isRequired//ptor shortcut
};

export default UserItem

//Navbar.js
import React from 'react';
import PropTypes from 'prop-types';
const Navbar=({icon,title})=>{
 return (
            <nav className="navbar bg-primary">
                <h1>
                    <i className={icon}/>
        {title}
                </h1>
            </nav>
            );
    
}

Navbar.defaultProps = {
    title: 'Github Finder',
    icon: 'fab fa-github'
};
Navbar.propTypes={
    title: PropTypes.string.isRequired,
    icon: PropTypes.string.isRequired
};

export default Navbar

//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 axios from 'axios';
import './App.css';

class App extends Component {
  state={
    users:[],
    loading:false
  }


//npm i axios
async componentDidMount(){
 this.setState({loading: true});
 //axios.get('https://api.github.com/users').then(res => console.log(res.data));
 const res = await axios
 .get('https://api.github.com/users');

 //console.log(res.data);
 this.setState({users: res.data,loading:false});
 
}

  render(){
    return(
      <div className="App">
        <Navbar/>
        <div className='container'>
        <Users loading={this.state.loading} users={this.state.users}/>
        </div>
        
      </div>
    );
  }
  
}

export default App;