GoogleAd React Component

google_ad.js

import React, { Component, PropTypes } from 'react';


export default class GoogleAd extends Component {
  static propTypes = {
    client: PropTypes.string,
    slot: PropTypes.string,
    format: PropTypes.string,
    wrapperDivStyle: PropTypes.object
  }
  constructor(props) {
    super(props);
  }
  // This code is ran when the component mounts
  componentDidMount() {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }
  
  // an outer div for styling purposes
  // changed class to ClassName
  // changed style from string to an object

  render() {
    return (
      <div style={this.props.wrapperDivStyle} > 
        <ins className="adsbygoogle"  
          style={{'display': 'block'}}
          data-ad-client={this.props.client}
          data-ad-slot={this.props.slot}
          data-ad-format={this.props.format}>
        </ins>
      </div>
    );
  }
}

************************************************************

// To use the Component
import React, { Component, PropTypes } from 'react';
import GoogleAd from './google_ad';

// create a style object that is applied
// to the div wrapping the adSense code
// no styling required - just leave style object empty
const style = {
  marginTop: '15px',
  marginBottom: '20px'
};

const SomeComponent = props => {
  return (
    <GoogleAd 
      client="ca-pub-xxxxxxxxxx" 
      slot="xxxxxxxxxx" 
      format="auto" 
      wrapperDivStyle={style}
    />
  );
};

export default SomeComponent;