Develop Reference

Google Adsense in React Component - using react-adsense

I am trying to include Google Adsense in a React component using 'react-adsense'.
I have followed the creator's instructions here.
I am getting the following error:
{message: 'adsbygoogle.push() error: No slot size for availableWidth=0', name: 'TagError', pbr: true, stack: 'TagError: adsbygoogle.push() error: No slot size f…oogle.js?client=ca-pub-1034524975771842:102:1098)'}
I have looked into this error and tried the suggestions here, here, and here.
From what I can tell it has something to do with a parent div's width. I've gone through and made sure everything has a set width but no luck. Am I overlooking something super obvious??
REACT COMPONENT
import React from 'react';
import '../styles/ads.css';
import AdSense from 'react-adsense';
const Ads = () => {
return (
<div className='ads'>
<AdSense.Google
client='ca-pub-1034524975771842'
slot='3468851388'
style={{ display: 'block' }}
format='auto'
responsive='true'
layoutKey='-gw-1+2a-9x+5c'
/>
</div>
);
};
export default Ads;
APP.JS
import './styles/app.css';
import React from 'react';
import Ads from './components/Ads';
function App() {
return (
<div className='app'>
<Ads />
</div>
);
}
export default App;

React Props not passing down to children components?

I am trying to learn React so please bear with me!
I am following a tutorial to help me understand react and how you can pass down components.
I am trying to pass props down 2 levels, but when I render the code on the third element, nothing appears on the page. Using React Dev tools on chrome, it seems that the props are loading on the Tweets.js component rather than the Tweet.js component.
Can anybody tell me whats wrong? The order is App.js > Tweets.js > Tweet.js
For ref, I am following the following tutorial, it is around the 15 min mark.
React State and Props | Learn React For Beginners Part 4
App.js
import './App.css';
import Tweets from './components/Tweets';
import React from 'react';
function App() {
const name=["Name1", "Name2", "Name3"];
const age=["21", "22", "24"]; /* Data is created here */
return (
<div className="App">
<Tweets me={name} age={age} />{/*Data is added to component*/ }
</div>
);
}
export default App;
Tweets.js
import Tweet from './Tweet';
const Tweets = (props) => (
<section>
<Tweet />
</section>
);
export default Tweets;
Tweet.js
const Tweet = (props) => (
<div>
<h1>{props.me}</h1>
<h1>{props.age}</h1>
</div>
);
export default Tweet;

You would need to transfer props through your Tweets component:
const Tweets = (props) => (
<section>
<Tweet {...props} />
</section>
);

Javascript: Error: Cannot find module '../data/icons/table.png'

I'm trying to pass the path of an image to a child component in react and then provide that path as the source attribute in the child component. When I hardcode the path in the child it works, but when I use template literal it does not.
Below is the code snippet. I am unable to understand why the template literal is not working
import React, {Component} from 'react';
class MenuItem extends Component{
render(){
// the below 2 lines print exactly the same thing, i.e., string ../data/icons/table.png
console.log(typeof `${this.props.icon}`, `${this.props.icon}`);
console.log(typeof "../data/icons/table.png", "../data/icons/table.png");
return (
<div className = "sidemenu menu-item">
<img src={require("../data/icons/table.png")} /> //this works
<img src={require(`${this.props.icon}`)} /> //Error: Cannot find module '../data/icons/table.png'.
{this.props.name}
</div>
)
}}

You can load images like modules, if you are using a bundler (like webpack, or yarn) in the same way that API modules.
import React, {Component} from 'react';
import table from './data/icons/table.png';
class MenuItem extends Component{
render(){
return (
<div className = "sidemenu menu-item">
<img src={table} />
</div>
)
}
}

Trouble with functional creation and rendering of div in sub of a sub

I'm sure im missing some key element of understanding because this file gets exported and used in another file and then that is exported to another file and then that last file in the chain is what is sent to react.DOM. but why can't I make my components in a function in this file and have them be rendered. I'm not understanding something about the chain and how many exported files you can have and how i guess nested they can be.... help please. Cause if I do this at the surface level of the file chain it works fine but not this far down...
import React, { Component } from 'react';
import './Css_files/OfficeComponent.css';
class OfficeComponent extends Component {
pic_span_nurse(props){
return(
<div className="row box_infoz">
<div className="col-xs-3">
<h1>picture</h1>
</div>
<div className="col-xs-9">
<h5>So this has noew changed to the office part where we have staff in this box and directions on the bottom</h5>
</div>
</div>
);
}
render() {
return (
<div>
<pic_span_nurse/>
</div>
);
}
}
export default OfficeComponent;

I am very surprised doing <pic_span_nurse/> works at all, in any context.
I think you're mistaking the concept of what a Component is. A method inside a Component is not considered a component. It is still a method. Which means you have to render pic_span_nurse like you would when you return a method. This should definitely work:
{this.pic_span_nurse()}
The curly braces mean it's JavaScript code that should be interpreted, rather than literal text.
Also, JavaScript style guides encourage (read: must) naming to be done in camelcase, not underscores.

You can either create a separate component and use it in your code.
import React,{Component} from 'react';
import './Css_files/OfficeComponent.css';
const Pic_span_nurse =(props)=>{
return(
<div className="row box_infoz">
<div className="col-xs-3">
<h1>picture</h1>
</div>
<div className="col-xs-9">
<h5>So this has noew changed to the office part where we have staff in this box and directions on the bottom</h5>
</div>
</div>
);
}
class OfficeComponent extends Component {
render() {
let compProps = {};//the props of the Pic_span_nurse component
return (
<div>
<Pic_span_nurse {...compProps}/>
</div>
);
}
}
export default OfficeComponent;
Or you can use a function call to render the necessary html.
import React, { Component } from 'react';
import './Css_files/OfficeComponent.css';
class OfficeComponent extends Component {
pic_span_nurse=(props)=>{
return(
<div className="row box_infoz">
<div className="col-xs-3">
<h1>picture</h1>
</div>
<div className="col-xs-9">
<h5>So this has noew changed to the office part where we have staff in this box and directions on the bottom</h5>
</div>
</div>
);
}
render() {
return (
<div>
{this.pic_span_nurse(this.props)}
</div>
);
}
}
export default OfficeComponent;

Meteor react Issue with flashing image - shows logged out then logged in

UPDATE: after restart it works now. However it stills shows the logged out component first then the logged in one. Why is this because the user is logged in I just refresh the page?
UPDATE 2:
It has gone back to the flashing of the logged out => then then what it should be and then to white again, after no changes just restarting meteor.
UPDATE 3:
So it works then I navigate to this page but not others.It seems because the registration page subscribes to the items collection so that is how it picks it up. I thought it should not refresh the Box component when changing pages and should be subscribed to the items collection from the Box component itself. This page is loaded via flow router and is inputted into the content area of the site see below:
import Items from '/imports/collections/items/items.js';
export default class Registration extends TrackerReact(React.Component){
constructor(){
super();
this.state = {
subscription: {
items: Meteor.subscribe("allStarterItems")
}
}
}
The main page is here, the issues lies within the LeftNavbar area as this contains the boxes:
import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import LeftNavbar from './LeftNavbar';
export const MainLayout = ({content}) => (
<div className="main-layout">
<LeftNavbar />
<div className="right content-page">
<main>
{content}
</main>
</div>
</div>
)
Here is the left navbar page:
import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import Box from '/imports/ui/left_navbar/Box';
export default class LeftNavbar extends TrackerReact(React.Component){
constructor(){
super();
}
render(){
return (
<div className="left side-menu">
<div className="body rows scroll-y">
<div className="sidebar-inner ">
<Box />
</div>
</div>
</div>
)
}
}
Hey everyone I have an issue in my project.
I have an area where I have a stack of images stacked on top of each other and are overlayed. I know the css etc work as I have it on another page just not loading from a db.
Here the the file that checks if the user is logged in or not to decide what component to render:
import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import BoxSignedIn from '/BoxSignedIn';
import BoxSignedOut from '/BoxSignedOut';
export default class Box extends TrackerReact(React.Component){
constructor(){
super();
}
render(){
var layout;
if (Meteor.user()) {
layout = <BoxSignedIn />;
} else {
layout = <BoxSignedOut />;
}
return (
layout
)
}
}
Here is the component that is loaded. However when I reload the page it shows the logged out component for a split second, then it shows nothing. On the source of the page it shows no src from the images. In the console it sometimes shows 2 of the image sources, sometimes 3
import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import Items from '/imports/collections/items/items.js';
export default class BoxSignedIn extends TrackerReact(React.Component){
constructor(){
super();
this.state = {
subscription: {
items: Meteor.subscribe("allStarterItems")
},
layers: {
layer1: Meteor.user().profile.layer.1,
layer2: Meteor.user().profile.layer.2,
layer3: Meteor.user().profile.layer.3
}
}
}
componentWillUnmount(){
this.state.subscription.items.stop();
}
getItemSource(itemKey){
var itemer = Items.findOne({key: itemKey});
if(!itemer){
return "";
}else{
console.log(itemer.srcEntire); // shows src correctly
return itemer.srcEntire;
}
}
render(){
return (
<div className="media" >
<div className="Area">
<div className="container-on-top box-small" >
<img id="layer1" className="on-top img-responsive center-block on-top" name="layer1" src={this.getItemSource(this.state.layers.layer1)} />
<img id="layer2" className="on-top img-responsive center-block on-top" name="layer2" src={this.getItemSource(this.state.layers.layer2)} />
<img id="layer3" className="on-top img-responsive center-block on-top" name="layer3" src={this.getItemSource(this.state.layers.layer3)} />
</div>
</div>
</div>
)
}
}