Next JS - Component with condition example

Question

import React from 'react';
import PropTypes from 'prop-types';
import InteriorDesignItemComponent from './InteriorDesignItemComponent';

class InteriorDesignComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      limit: 10,
    };
    this.expand = this.expand.bind(this);
  }

  componentDidMount() {
    if (window.innerWidth < 576) {
      this.setState({ limit: 2 });
    }
  }

  expand(e) {
    e.preventDefault();
    this.setState({ limit: 10 });
  }

  render() {
    const { interiorDesignData } = this.props;
    const { limit } = this.state;
    let seeMoreInteriorDesigns;
    if (limit < 5) {
      seeMoreInteriorDesigns = <a className="btn btn-primary see-all" onClick={this.expand}>See More</a>;
    } else {
      seeMoreInteriorDesigns = <a href="http://yoursite.comy/projects" className="btn btn-primary see-all">See All</a>;
    }
    return (
      <div className="front-listing-component">
        <div className="container-fluid-no-mobile-gutter">
          <div className="mx-auto listing-component">
            {
              interiorDesignData.interiordesign.slice(0, limit).map(index => (
                <InteriorDesignItemComponent key={index.link} interiorDesignItemData={index} />
              ))
            }
            <div className="row">
              <div className="col text-center">
                {seeMoreInteriorDesigns}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

InteriorDesignComponent.defaultProps = {
  interiorDesignData: {},
};

InteriorDesignComponent.propTypes = {
  interiorDesignData: PropTypes.object,
};
export default InteriorDesignComponent;

 

Answer 1

{( agentDesc && agentDesc.length > 0) && <h2>About {agentBiz}</h2>}