Destructure state

Instead of this

{this.state.avatar_url}
{this.state.login}
{this.state.html_url}

Do this

const { login, avatar_url, home_url } = this.state

{avatar_url}
{login}
{html_url}

Full code

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

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

const UserItem = ({ user: { login, avatar_url, html_url } }) => {