How to use the semantic-ui-react.Responsive.onlyComputer function in semantic-ui-react

render() {
    const { activeItem } = this.state;

    return (
      
        
          
            
            {activeItem === 'phone' && }
            {activeItem === 'user' && }
            
          
        
      
    );
  }

{created}
                            
                            {reason}
                          
                        
                      
                      {serverLogs &&
                        
                      }
                      {commands &&
                        
                      }
                    
                    
                      
                        
                          <header>Details</header>
                          
                            
                              State: {canUpdateState ? (
                                
                              ) : (
                                <span>{state.name}</span>
                              )}
                            
                          
                          
                            
                              Assigned: {canAssign ? (
                                
                              ) : (

render() {
    const { width, match } = this.props;
    const vertical = width > Responsive.onlyComputer.minWidth;

    return(
      
    )
  }
}

render() {
    const { width } = this.state
    const textAlign = width >= Responsive.onlyComputer.minWidth ? 'right' : 'left'

    return (
      
        
          
            This grid has responsive align of the text. It will be right aligned on computer and left aligned on other
            breakpoints.
          
        
      
    )

render() {
      const { popupOpen } = this.state
      const { account } = this.props

      return (
         
            
               
               
               <div>
                  <div>
                     <div>
                        <div>
                           
                              <div>
                                 <img src="{LogoImage}">
                                 {this.props.location.pathname === `/node-staking` &amp;&amp; }</div></div></div></div></div>

render() {
    const { children } = this.props;
    const { fixed } = this.state;

    return (
      

{context => {
        const getWidth = getWidthFactory(context.isMobileFromSSR)

        return (
          
            {deviceComponents.mobile}
          
          
            {deviceComponents.tablet}
          
          
            {deviceComponents.desktop}
          
        )
      }}

const CategoryMenu = ({ changeCategory, handleScroll }) => {
  return (
    <menu size="large">
      Categories

       handleClick(changeCategory, "front")}
      &gt;
        
        Front End
      

       handleClick(changeCategory, "devops")}
      &gt;
        
        DevOps
      
       handleClick(changeCategory, "ml")}&gt;
        
        Machine Learning
      
       handleClick(changeCategory, "crypto")}</menu>

export default function MainHeader(props) {
  const { connected, onCall, calling, activeNumber } = props;

  const title = getWindowTitle(connected, onCall, calling);

  return (
    <>
      
      
      
    
  );
}

size="huge"
      borderless
      className={"top-menu " + data.category + "-menu"}
    >
      
        <img src="{logo}">
      
      
        <div>TechOverdose</div>
        <div>
          <p>Tech Aggregator for Tech Junkies</p>
        </div>
      
      
        
          
            
          
        
        
          
            Built with  by{" "}
            <a href="https://github.com/SCHKN">
              SCHKN
            </a>
          
        
      
    
  );
};