React - conditional rendering for mobile and desktop breakpoints

0 votes
49 views
added Oct 20 in React by lcjr First Warrant Officer (9,190 points)
class CoworkingMainTop extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isMobile: false,
    };
  }

  componentDidMount() {
    if (window.innerWidth < 767) {
      this.setState({ isMobile: true });
    }
  }
  
  render() { 
    return (
      <div>
        {this.state.isMobile ? (
          <>
            < CoworkingMainTopMobile />
            < CoworkingMainCities />
          </>
        ) : (
          < CoworkingMainTopDesktop />
        )}
      </div> 
    );
  }
}

export default CoworkingMainTop;

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...