'UPDATE: Problems with GPT ads implementation (React app) partially fixed

I am trying to return a test ad on my React app news feed but NPM seems to be lacking documentation. The only thing out there that I can find is from eBayClassifiedsGroup/react-advertising. Here's the code I have for Step1 (see lines 46-54):

import React, { Component } from 'react';
import './App.css';
import News from './News/News';
import SideFeed from './News/SideFeed';
import {
  AdvertisingProvider,
  AdvertisingSlot,
} from 'react-advertising';
import config from './News/config'



class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      news1: {
        type: 'top-headlines',
        query: 'sources=bbc-news'
      },
      news2: {
        type: 'everything',
        query: 'domains=techcrunch.com&language=en'
      },
      news3: {
        type: 'everything',
        query: 'domains=comicbookmovie.com&language=en'
      }
    };
  }

  render() {
    return (
      <div className="container-fluid">
        <div className="navbar-fixed">
          <nav>
            <div className="nav-wrapper indigo lighten-4">
              <a href="/" className="brand-logo center">RF News Feed as of 6 DEC 2021</a>
            </div>
          </nav>
        </div>
        <div className="row">
          <div className="col s8">
            <News news={this.state.news1} />
            <News news={this.state.news2} />
            <div id="banner-ad"
              style= { {
                width: 300,
                height: 250
              }}> 
              <AdvertisingProvider config={config} />
              <AdvertisingSlot config={config} />
            </div> 
          </div>
          <div className="col s4">
            <SideFeed news={this.state.news3}/>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Step 2: The only ad dependency is in config.js which is below:

import React from 'react';

const config = {
    slots: [
      {
        id: "banner-ad",
        path: "/6355419/Travel/Europe/France/Paris",
        sizes: [[300, 250]]
          }
        ]
    };

export default config;
  

Can anyone take a gander or refer me to a resource re: GPT ads implementation for React?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source