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

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">
RF News Feed as of 6 DEC 2021
</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?

Related

Fetching and displaying data with React

i am new to react and have been trying this for a long time without any success. Maybe someone could look through and determine the mistate i am making. here is my code.
I have the App.js file with a route to services page where i want to fecth and display data divs with services from a mysql database with react and JSX.
import React, { Component } from "react";
import { BrowserRouter } from "react-router-dom";
import Footer from "./Footer";
import Header from "./Header";
import axios from "axios";
class Services extends React.Component {
constructor(props) {
super(props);
this.state = {
services: [],
};
}
componentDidMount() {
axios
.get("http://localhost:5000/services")
.then((response) => this.setState({ services: response.data }));
}
render() {
var { services } = this.state;
return (
<div>
<div className="row">
<BrowserRouter>
<Header></Header>
</BrowserRouter>
<div className="Services">
<br></br>
<br></br>
<br></br>
</div>
<div className="row">
<h1 className="text-center title">Our Services</h1>
<p className="p-3 text-left">
Quickly get help for your issue by selcting the service that
matches your issues. You can always describe your issue if it does
not match any of our services and you only pay when the issue has
been resolved.
</p>
<hr></hr>
{services}
</div>
</div>
<BrowserRouter>
<Footer></Footer>
</BrowserRouter>
</div>
);
}
}
export default Services;
import React from "react";
import { BrowserRouter } from "react-router-dom";
import axios from "axios";
class Services extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount() {
axios.get("https://jsonplaceholder.typicode.com/posts").then(response => {
console.log(response);
this.setState({ data: response.data });
});
}
render() {
let services_data = [];
this.state.data.forEach((res, i) => {
services_data.push(
<ul key={res.i}>
<li>{res.id}</li>
<li>{res.title}</li>
<li>{res.body}</li>
</ul>
);
});
return (
<div>
<div className="row">
<BrowserRouter>Header</BrowserRouter>
<div className="Services" />
<div className="row">
<h1 className="text-center title">Our Services</h1>
<p className="p-3 text-left">
Quickly get help for your issue by selcting the service that
matches your issues. You can always describe your issue if it does
not match any of our services and you only pay when the issue has
been resolved.
</p>
<hr />
{services_data}
</div>
</div>
<BrowserRouter>Footer</BrowserRouter>
</div>
);
}
}
export default Services;
The above code is working fine and split the method like this.

Bootstrap doesn't work properly in ReactJS application

I learn a course with bootstrap and to practice it I wanted to use it in ReactJS. The app is very small, is just a practice, not a real project.
I guess that I do something wrong, because I don't see on my screen the 4 columns. This is what I get
screenshot
So I created a react app
npx create-react-app my-app
and I installed bootstrap and use it.
npm install --save bootstrap
In index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
I have the App.js
import React, { Component } from 'react';
import './App.css';
import CardList from './componets/card-lists/card-list';
class App extends Component {
state = {
cards: []
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then(users => this.setState({ cards: users }))
.catch((error) => {
console.log('Fetch users error ', error)
})
}
render() {
return (
<div className="App">
{this.state.cards.map((card) => {
return <CardList card={card} key={card.id} />
})}
</div>
)
}
}
export default App;
And from here I pass props to card-list.js component.
const cardList = ({ card }) => {
return (
<div>
<div className="container">
<div className="row">
<div className="col-sm-4 col-md-4 col-lg-4 card-list">
<button className="btn btn-danger">click</button>
<h1>{card.name}</h1>
<p>{card.email}</p>
</div>
</div>
</div>
</div>
);
};
export default cardList;
In the css I have just a few lines:
.card-list {
background-color: yellow;
border: 1px solid red;
margin: 10px;
}
Someone please tell me, what I'm doing wrong?
You need to move divs with classes container and row to the App.js.
App.js
render() {
return (
<div className="App">
<div className="container">
<div className="row">
{this.state.cards.map(card => {
return <CardList card={card} key={card.id} />;
})}
</div>
</div>
</div>
);
}
Cardlist
const cardList = ({ card }) => {
return (
<div>
<div className="col-sm-4 col-md-4 col-lg-4 card-list">
<button className="btn btn-danger">click</button>
<h1>{card.name}</h1>
<p>{card.email}</p>
</div>
</div>
);
};
Also please not that Bootstrap grid system uses 12 column, and you are using 4 in classNames, so you have 12 /4 =3 columns, if you want to have 4 columns, you need to use 3 in your components like <div className="col-sm-3 col-md-3 col-lg-3 card-list">

How to call props of a sidebar Component? - Leads to TypeError: Cannot read property 'map' of undefined

I am adding a props of sidebar Component to my template.
I am passing {...this.props} to Sidebar.
But it still leads to TypeError: Cannot read property 'map' of undefined in my Menu file.
My PostTemplateDetails file that I wish to add the Sidebar component:
import React from 'react'
import Sidebar from '../Sidebar'
import { Link } from 'gatsby'
import moment from 'moment'
import './style.scss'
class PostTemplateDetails extends React.Component {
render() {
const { subtitle, author } = this.props.data.site.siteMetadata
const post = this.props.data.markdownRemark
const tags = post.fields.tagSlugs
const tagsBlock = (
<div className="post-single__tags">
<ul className="post-single__tags-list">
{tags &&
tags.map((tag, i) => (
<li className="post-single__tags-list-item" key={tag}>
<Link to={tag} className="post-single__tags-list-item-link">
{post.frontmatter.tags[i]}
</Link>
</li>
))}
</ul>
</div>
)
return (
<div>
<Sidebar {...this.props} />
<div className="content">
<div className="content__inner">
<div className="post-single">
<div className="post-single__inner">
<h1 className="post-single__title">{post.frontmatter.title}</h1>
<div
className="post-single__body"
/* eslint-disable-next-line react/no-danger */
dangerouslySetInnerHTML={{ __html: post.html }}
/>
<div className="post-single__date">
<em>
Published {moment(post.frontmatter.date).format('D MMM YYYY')}
</em>
</div>
</div>
<div className="post-single__footer">
{tagsBlock}
<hr />
<p className="post-single__footer-text">
{subtitle}
<a
href={`https://twitter.com/${author.twitter}`}
target="_blank"
rel="noopener noreferrer"
>
<br /> <strong>{author.name}</strong> on Twitter
</a>
</p>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default PostTemplateDetails
My Sidebar component file:
import React from 'react'
import get from 'lodash/get'
import { Link } from 'gatsby'
import Menu from '../Menu'
import Links from '../Links'
import profilePic from '../../pages/photo.jpg'
import './style.scss'
class Sidebar extends React.Component {
render() {
const { location } = this.props
const {
author,
subtitle,
copyright,
menu,
} = this.props.data.site.siteMetadata
const isHomePage = get(location, 'pathname', '/') === '/'
/* eslint-disable jsx-a11y/img-redundant-alt */
const authorBlock = (
<div>
<Link to="/">
<img
src={profilePic}
className="sidebar__author-photo"
width="75"
height="75"
alt={author.name}
/>
</Link>
{isHomePage ? (
<h1 className="sidebar__author-title">
<Link className="sidebar__author-title-link" to="/">
{author.name}
</Link>
</h1>
) : (
<h2 className="sidebar__author-title">
<Link className="sidebar__author-title-link" to="/">
{author.name}
</Link>
</h2>
)}
<p className="sidebar__author-subtitle">{subtitle}</p>
</div>
)
/* eslint-enable jsx-a11y/img-redundant-alt */
return (
<div className="sidebar">
<div className="sidebar__inner">
<div className="sidebar__author">{authorBlock}</div>
<div>
<Menu data={menu} />
<Links data={author} />
<p className="sidebar__copyright">{copyright}</p>
</div>
</div>
</div>
)
}
}
export default Sidebar
My Menu component file, which is added in the Sidebar component file - this is where the error seems to be residing.
import React from 'react'
import { Link } from 'gatsby'
import './style.scss'
class Menu extends React.Component {
render() {
const menu = this.props.data
const menuBlock = (
<ul className="menu__list">
{menu.map(item => (
<li className="menu__list-item" key={item.path}>
<Link
to={item.path}
className="menu__list-item-link"
activeClassName="menu__list-item-link menu__list-item-link--active"
>
{item.label}
</Link>
</li>
))}
</ul>
)
return <nav className="menu">{menuBlock}</nav>
}
}
export default Menu
I am not sure why this is not working, since adding in my PAGETemplateDetails file seem to be working fine:
import React from 'react'
import Sidebar from '../Sidebar'
import './style.scss'
class PageTemplateDetails extends React.Component {
render() {
const page = this.props.data.markdownRemark
return (
<div>
<Sidebar {...this.props} />
<div className="content">
<div className="content__inner">
<div className="page">
<h1 className="page__title">{page.frontmatter.title}</h1>
<div
className="page__body"
/* eslint-disable-next-line react/no-danger */
dangerouslySetInnerHTML={{ __html: page.html }}
/>
</div>
</div>
</div>
</div>
)
}
}
export default PageTemplateDetails
SiteMetadata.menu is queried on the Post template File:
import React from 'react'
import Helmet from 'react-helmet'
import { graphql } from 'gatsby'
import Layout from '../components/Layout'
import PostTemplateDetails from '../components/PostTemplateDetails'
class PostTemplate extends React.Component {
render() {
const { title, subtitle } = this.props.data.site.siteMetadata
const post = this.props.data.markdownRemark
const { title: postTitle, description: postDescription } = post.frontmatter
const description = postDescription !== null ? postDescription : subtitle
return (
<Layout>
<div>
<Helmet>
<title>{`${postTitle} - ${title}`}</title>
<meta name="description" content={description} />
</Helmet>
<PostTemplateDetails {...this.props} />
</div>
</Layout>
)
}
}
export default PostTemplate
export const pageQuery = graphql`
query PostBySlug($slug: String!) {
site {
siteMetadata {
title
subtitle
copyright
author {
name
twitter
}
disqusShortname
url
}
}
markdownRemark(fields: { slug: { eq: $slug } }) {
id
html
fields {
tagSlugs
}
frontmatter {
title
tags
date
description
}
}
}
`
Not sure if this is relevant but this is the post file:
import React from 'react'
import { Link } from 'gatsby'
import moment from 'moment'
import './style.scss'
class Post extends React.Component {
render() {
const {
title,
date,
category,
description,
} = this.props.data.node.frontmatter
const { slug, categorySlug } = this.props.data.node.fields
return (
<div className="post">
<div className="post__meta">
<time
className="post__meta-time"
dateTime={moment(date).format('MMMM D, YYYY')}
>
{moment(date).format('MMMM YYYY')}
</time>
<span className="post__meta-divider" />
<span className="post__meta-category" key={categorySlug}>
<Link to={categorySlug} className="post__meta-category-link">
{category}
</Link>
</span>
</div>
<h2 className="post__title">
<Link className="post__title-link" to={slug}>
{title}
</Link>
</h2>
<p className="post__description">{description}</p>
<Link className="post__readmore" to={slug}>
Read
</Link>
</div>
)
}
}
export default Post
You're passing the property data as "menu" <Menu data={menu} />
In the Menu component, you don't have the menu property, you have this.props.data, which is equal to menu value, as defined in the Sidebar component. Probably there's no such property "menu" on this.props.data
So your code should be const data = this.props or const menu = this.props.data if you want to keep the variable name.
Thank you everyone, it was a query problem as ksav suspected. The Menu and Sidebar components were fine. I failed to query the menu information in my sitemetadata, and was able to fix it by going to my Post Template File and querying the menu, like so:
export const pageQuery = graphql`
query PostBySlug($slug: String!) {
site {
siteMetadata {
title
subtitle
copyright
menu {
label
path
}
author {
name
twitter
}
disqusShortname
url
}
}
markdownRemark(fields: { slug: { eq: $slug } }) {
id
html
fields {
tagSlugs
}
frontmatter {
title
tags
date
description
}
}
}
`
Thank you everyone, I'm struggling but I got there.

ReactJS: Image not rendering

I am trying to render static images from images folder under src directory, however, it is not rendering, if i try to import any of the images directly and then pass in jsx like commented portion in images declaration it renders fine, also tried with backgroundImage property of css, it does not render anything.
import React, { Component } from 'react';
import Pizza from './components/pizza';
import './App.css';
class App extends Component {
state = {
open: false,
active: null,
categories: []
}
componentDidMount() {
this.setState({
categories
})
}
render() {
return (
<div className="App">
<Pizza data={this.state}/>
</div>
);
}
}
const categories = [
{"title":"Italian Pizza","link":"../images/italian-pizza.jpg",
"id":"586537da62981d5fb8c21617",
"details": "aksnflafiafoasofhafhoahfohaofhoahfhashfohasfhofhahsofohahosf"}
];
export default App;
pizza.js
import React from 'react';
import PropTypes from 'prop-types';
import italian from '../images/italian-pizza.jpg'
const Pizza = ({data}) => {
const images = data.categories.map((d,i) => {
return (
<div key={i}>
{/* <img src={italian} /> */}
<img src={`${d.link}`} />
</div>
)
});
return (
<div className="pizza">
<header className="header">Pizza</header>
<div className="main">
{data.categories.map((category, index) => {
return (
<div key={index}>
<ul className="items">
{images}
{/* <li style={{backgroundImage: `url(require(italian))`}} /> */}
</ul>
</div>
)
})}
</div>
</div>
)
}
Pizza.propTypes = {
categories: PropTypes.array,
open: PropTypes.bool,
active: PropTypes.bool
}
export default Pizza;

Can't binding reference this in React

Im trying to create a ReactList that contains the activities on state, but i can't manage to reference the variable state from inside renderItemOtherActi when called as
itemRenderer={this.renderItemOtherActi}
I tryed using
itemRenderer={::this.renderItemOtherActi}
or
itemRenderer={this.renderItemOtherActi.bind(this)}
but nothing worked, I'm sure it's a really dumb mistake, sorry in advance im new in JSX. Thanks a lot!
import React from 'react';
import ReactList from 'react-list';
import './css/bootstrap.min.css';
import './css/small-business.css';
import Navbar from './Navbar';
import Footer from './Footer';
class Activity_Page extends React.Component {
state = {
my_activities: [
{
name:"Yoga"
},
{
name:"Crossfit"
}],
other_activities: [
{
name:"Zamba"
},
{
name:"Spinnig"
}]
};
return_state(){
return this.state;
}
renderItemMyActi(index, key) {
return <div key={key}>Yoga</div>;
}
renderItemOtherActi(index, key) {
return <div key={key}>{this.state.my_activities[index].name}</div>;
}
render() {
return (
<div>
<Navbar />
<div className="Activity_Page container">
<div className="row">
<div className="col-lg-10">
<h3>Actividades a las que estoy inscripto</h3>
<div style={{overflow: 'auto', maxHeight: 400}}>
<ReactList
itemRenderer={this.renderItemMyActi}
length={this.state.my_activities.length}
type='uniform'
/>
</div>
<h3>Actividades a las que no estoy inscripto</h3>
<div style={{overflow: 'auto', maxHeight: 400}}>
<ReactList
itemRenderer={this.renderItemOtherActi}
length={this.state.other_activities.length}
type='uniform'
/>
</div>
</div>
</div>
<footer className="Footer">
<div className="row">
<div className="col-lg-12">
<Footer />
</div>
</div>
</footer>
</div>
</div>
);
}
}
export default Activity_Page;
you either
bind it in the constructor:
constructor(props){
super(props);
this.renderItemOtherActi=this.renderItemOtherActi.bind(this);
}
or use arrow function
renderItemOtherActi = (index, key) => {
// ...
}

Resources