drip.js

import React, { Component } from 'react';
import PageWrapper from "../../components/PageWrapper";
import Link from '../../components/Link';

class Drip extends Component {

  renderServices() {
    const resource = this.props.reduxState.page.resource;
    const data = resource.acf;
    return data.services.map((service, index) => {
      let price = (service.price === 0 ? 'FREE' : '$' + service.price);
      return (
        <div className="d-flex align-items-start flex-column col-md-4 mb-4" key={"service-" + index}>
          <h4 className="text-info">{service.name}</h4>
          <h5 className="text-success">{price}</h5>
          <div className="mb-auto">
            {service.description}
          </div>
          <br />
          <Link className="btn btn-success" href={service.link}>Learn More</Link>
        </div>
      )
    });
  }

  render() {
    const resource = this.props.reduxState.page.resource;
    const data = resource.acf;
    return (
      <div>
        <header className="hero">
          <div className="headline container">
            <div className="row">
              <div className="col-lg-12">
                <div className="intro-text">
                  <h1 className="name">{data.headline}</h1>
                  <h2 className="subheadline">{data.subheadline}</h2>
                </div>
              </div>
            </div>
          </div>
        </header>

        <main role="main">
          <div className="container pt-5">
            <div className="row mb-4">
              {this.renderServices()}
            </div>
          </div>
        </main>
      </div>
    )
  }
}

export default PageWrapper(Drip);