Example: Component with extracted logic

CallToAction.jsx

import cn from 'classnames';
import PropTypes from 'prop-types';
import dynamic from 'next/dynamic';
import Illustration from 'UI/components/Illustration';
import { LINK_TYPE } from 'utils/constants/linkType';
import useProps from './utils/useProps';
import styles from './styles.module.scss';

const Contact = dynamic(() => import('./content/Contact'));
const GetBook = dynamic(() => import('./content/GetBook'));
const Subscribe = dynamic(() => import('./content/Subscribe'));

const CallToAction = (props) => {
  const {
    titles,
    subtitle,
    buttonTitle,
    type,
    page,
    view,
    className,
    images,
    isNew,
    downloadLink,
    isSubscribed,
    isOpenFeedbackForm,
    handleOnClick,
    slug,
  } = useProps(props);

  return (
    <div
      className={cn(
        styles[type],
        styles[view],
        styles[page],
        className,
        {
          [styles.openContact]: isOpenFeedbackForm,
          [styles.new]: isNew,
          [styles.card]: !isNew,
          [styles.isSubscribed]: isSubscribed,
        },
      )}
    >
      {images.map(({ url, alt }, i) => (
        <Illustration
          src={url}
          alt={alt}
          className={cn(styles.image, styles[`image-${i}`])}
        />
      ))}
      {(() => {
        switch (type) {
        case LINK_TYPE.subscribe:
          return (
            <Subscribe
              titles={titles}
              isSubscribed={isSubscribed}
              subtitle={subtitle}
              buttonTitle={buttonTitle}
              slug={slug}
            />
          );
        case LINK_TYPE.book:
          return (
            <GetBook
              titles={titles}
              subtitle={subtitle}
              buttonTitle={buttonTitle}
              bookCover={images[0]}
              downloadLink={downloadLink}
              slug={slug}
            />
          );
        case LINK_TYPE.callToAction:
          return (
            <Contact
              titles={titles}
              subtitle={subtitle}
              buttonTitle={buttonTitle}
            />
          );
        default:
          return (
            <Contact
              titles={titles}
              subtitle={subtitle}
              buttonTitle={buttonTitle}
              handleOnClick={handleOnClick}
            />
          );
        }
      })()}
    </div>
  );
};

CallToAction.defaultProps = {
  href: '',
  handleOnClick: () => {},
  className: null,
  title: '',
  subtitle: '',
  data: {},
};

CallToAction.propTypes = {
  data: PropTypes.instanceOf(Object), // It's preferred to pass CTA data with single AS_IS entry. not separate fields
  title: PropTypes.string,
  subtitle: PropTypes.string,
  buttonTitle: PropTypes.string,
  href: PropTypes.string,
  type: PropTypes.string,
  handleOnClick: PropTypes.func,
  className: PropTypes.string,
};

export default CallToAction;

useProps.js

import {
  getDocumentFields,
  getFileUrl,
  getImage,
} from 'utils/helper';
import { useRouter } from 'next/router';
import { SUBSCRIPTION_CASH_KEY, useSubscribeMutation } from 'redux/apis/dataSending';

export default ({
  title: titleProp,
  data,
  buttonTitle: buttonTitleProp,
  ...props
}) => {
  const {
    new: isNew,
    title,
    subtitle,
    imagesBundle,
    buttonTitle,
    files: rawFiles,
    type,
    isOpenFeedbackForm,
  } = getDocumentFields(data, [
    'title',
    'subtitle',
    'new',
    'imagesBundle',
    'buttonTitle',
    'type',
    'files',
    'isOpenFeedbackForm',
  ]);

  const [
    _,
    { data: { isSubscribed } = {} },
  ] = useSubscribeMutation({ fixedCacheKey: SUBSCRIPTION_CASH_KEY });

  const { query: { slug } } = useRouter();

  const images = (imagesBundle || []).map(getImage);

  const titles = (title || titleProp).split('||');

  const files = (rawFiles || []).map(getFileUrl);

  return {
    ...props,
    titles,
    subtitle,
    images,
    isNew,
    buttonTitle: buttonTitleProp || buttonTitle,
    type,
    isSubscribed,
    downloadLink: files[0],
    isOpenFeedbackForm,
    slug,
  };
};