multiple user github display from class component to function component

 

//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;

//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

//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

//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

Ref:Rep change