RA About Page - React

index.jsx

import React from 'react'

import GlobalStore from '../../stores/global'
import GlobalActions from '../../actions/global'

import Hero from './blocks/Hero'
import ServicesGrid from './blocks/ServicesGrid'
import Ventures from './blocks/Ventures'
import LogoGrid from './blocks/LogoGrid'

class About extends React.Component {
  constructor(props) {
    super(props)

    this.state = GlobalStore.getState()
    this.onChange = this.onChange.bind(this)
  }

  onChange(state) {
    this.setState(state)
  }

  componentDidMount() {
    GlobalStore.listen(this.onChange)
  }

  componentWillUnmount() {
    GlobalStore.unlisten(this.onChange)
  }

  render() {
    return (
      <div className="page page-about">
        <Hero headline={this.state.content.about.acf.headline}/> {this.state.content.about.acf.content.map((module) => {
          switch (module.acf_fc_layout) {
            case 'services_grid':
              return <ServicesGrid key={module.acf_fc_layout} title={module.title} grid={module.grid} />
            break
            
            case 'ventures_block':
            return <Ventures key={module.acf_fc_layout} title={module.title} copy={module.copy} />
            break
            
            case 'logo_grid':
            return <LogoGrid key={module.acf_fc_layout} title={module.title} blurb={module.blurb} logos={module.logos} />
            break
          }
        })}
      </div>
    )
  }
}

export default About