import React, {useEffect, useState} from 'react';
import './selectserver.scss'
import ShareIcon from '@material-ui/icons/Share';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';

export default function() {
  const [select, setSelect] = useState(false);
  useEffect(() => {
    console.log(select)
  })
  const showUnderSelect = () => {
    if(select) {
      return (
        <div className="login__select__under">
          <div className="login__select__elem">Smile</div>
          <div className="login__select__elem">Smile</div>
          <div className="login__select__elem">Smile</div>
        </div>
      )
    }
  }
  return (
    <React.Fragment>
      <div className="login__select__block">
        <ShareIcon className="login__select__img" />
        <div onClick={() =>  setSelect(!select) } className="login__select__input">Выберете сервер</div>
        <KeyboardArrowDownIcon className="login__select__arrow"/>
      </div>
      {showUnderSelect()}

    </React.Fragment>
  )
}

import React, { useState } from 'react';
import './selectserver.scss';
import ShareIcon from '@material-ui/icons/Share';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';

const SomeComponent = () => {
  const [select, setSelect] = useState(false);

  const toggleServer = () => setSelect(!select);

  return (
    <>
      <div className="login__select__block">
        <ShareIcon className="login__select__img" />
        <div onClick={toggleServer} className="login__select__input">
          Выберете сервер
        </div>
        <KeyboardArrowDownIcon className="login__select__arrow" />
      </div>
      {select && (
        <div className="login__select__under">
          <div className="login__select__elem">Smile</div>
          <div className="login__select__elem">Smile</div>
          <div className="login__select__elem">Smile</div>
        </div>
      )}
    </>
  );
};

export default SomeComponent;