We Keep Coding

Vue/Nuxt app is rendering content (not components, just content) twice on every page

I am very new to Vue/Nuxt programming and followed a "add a blog" tutorial which I then modified for my site. It all works perfectly except the actual it is rendering content twice. It renders
NavPage (component) > content > FooterDiv(component) then content again. See image:
Image of the page showing duplicated content
This happens on every page.
I am including my blogpage code ecasue in testing it seems to be where the problem lives :
<template>
<div>
<div class="home-page">
<h2>Latest Posts</h2>
<div class="articles">
<div class="article" v-for="article of articles" :key="article.slug">
<nuxt-link :to="{ name: 'slug', params: { slug: article.slug } }">
<div class="article-inner">
<img :src="require(`~/assets/resources/${article.img}`)" alt="" />
<div class="detail">
<h3>{{ article.title }}</h3>
<p>{{ article.description }}</p>
</div>
</div>
</nuxt-link>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "BlogPage",
data() {
return {
name: ''
}
},
mounted() {
let user = localStorage.getItem('user-info');
if (!user) {
this.$router.push({ name: "BlogPage" })
}
},
async asyncData({ $content, params }) {
const articles = await $content('articles', params.slug)
.only(['title', 'description', 'img', 'slug'])
.sortBy('createdAt', 'asc')
.fetch()
return {
articles
}
}
}
I have also included the structure being rendered by Vue per the Vue Dev Tools
This image is what I see in the dev tools when the page is rendered
I have spent hours troubleshooting this and can find no other info on the issue.
Thank you for any help, and your patience with a newbie. Let me know if you need to see any other code.
As requested here is my NavPage component code:
<template>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="#page-top">Denise Pedro</a>
<button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="navbar-brand"> <NuxtLink to="/">Home</NuxtLink></li>
<li class="navbar-brand"> <NuxtLink to="/PortfolioPage">Portfolio</NuxtLink></li>
<li class="navbar-brand"> <NuxtLink to="/ResumePage">Resume</NuxtLink></li>
<li class="navbar-brand"> <NuxtLink to="/ContactPage">Contact</NuxtLink></li>
<li class="navbar-brand"> <NuxtLink to="/BlogPage">Blog</NuxtLink></li>
</ul>
</div>
</div>
</nav>
</template>
and my FooterDiv component
<template>
<!-- Footer-->
<footer class="footer text-center">
<div class="container">
<div class="row">
<!-- Footer Location-->
<div class="col-lg-4 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">Location</h4>
<p class="lead mb-0">
Seattle through Olympia, WA
<br />
</p>
</div>
<!-- Footer Social Icons-->
<div class="col-lg-4 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">Around the Web</h4>
<!-- <a class="btn btn-outline-light btn-social mx-1" href="#!"><font-awesome-icon icon="fa-brands fa-facebook" /></a> -->
<a class="btn btn-outline-light btn-social mx-1" href="#!"><img src="../assets/img/facebook-brands.svg" alt="facebook icon" /></a>
<a class="btn btn-outline-light btn-social mx-1" href="#!"><img src="../assets/img/twitter-brands.svg" alt="twitter icon"/></a>
<a class="btn btn-outline-light btn-social mx-1" href="#!"><img src="../assets/img/linkedin-in-brands.svg" alt="linkedin icon"/></a>
</div>
<!-- Footer About Text-->
<div class="col-lg-4">
<h4 class="text-uppercase mb-4">Denise Pedro</h4>
<p class="lead mb-0">
desiraes#gmail.com
<!-- Start Bootstrap -->
</p>
</div>
</div>
</div>
</footer>
</template>
and lastly, my layout code
<template>
<div>
<NavPage />
<Nuxt />
<FooterDiv />
<Nuxt />
</div>
</template>
<script>
import NavPage from '../src/components/NavPage.vue';
import FooterDiv from '../src/components/FooterDiv.vue'
export default {
components: {
NavPage,
FooterDiv
},
}
</script>
Thank you

In your layout, you've put </Nuxt> twice, that's why the page content is duplicated, you should remove it.
your layout.vue should look like that:
<template>
<div>
<NavPage />
<Nuxt />
<FooterDiv />
</div>
</template>
<script>
import NavPage from '../src/components/NavPage.vue';
import FooterDiv from '../src/components/FooterDiv.vue'
export default {
components: {
NavPage,
FooterDiv
},
}
</script>

bootstrap card shows vertically instead of being responsive

The data variable contains all the data needed for this operation the problem is that the frontend shows card one below the other whereas I want it to show 3 or 4 in one row. I can assure that the error is not with the react or the graphql, the error is in the bootstrap or the way I am rendering the data.
I just want a responsive design so at first i have created a html css bootstrap ui which was perfectly working and was responsive but when i combined it with the data it lost its responsiveness and now it shows cards one below the other.
here is the image of how it is currentlyIt shows that there is a card but no other card along the row
Here is my code:
import React, { useState } from "react";
import { gql, useQuery } from "#apollo/client";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
const getBooksQuery = gql`
{
books {
name
id
genre
author {
name
}
description
rating
image
}
}
`;
function BooksDisplay() {
const { loading, error, data } = useQuery(getBooksQuery);
var [selected, setSelected] = useState("");
if (loading) return <p>Loading....</p>;
if (error) return <p>Ops! Something went wrong</p>;
return (
<div>
<div id="book-list">
{data.books.map((book) => (
<div className="container-fluid my-5 books_section">
<div className="row">
<div className="col-xl-3 col-lg-4 col-sm-6 col-12 mt-4">
<div className="card h-100">
<img src={book.image} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title font-weight-bold text-secondary">
{book.name}
</h5>
<span className="card-text">
{book.description}
<div className="collapse m-0" id="collapseExample">
<div className="card card-body border-0 p-0">
{book.description}
</div>
</div>
</span>
<a
className="card-link d-block"
data-toggle="collapse"
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample">
See More
</a>
</div>
<ul className="list-group list-group-flush">
<li className="list-group-item">
Authors:
<span>
{book.author.map((author) => author.name).join(" ")}
</span>
</li>
<li className="list-group-item">
Genre: <span>{book.genre.join(" ")}</span>
</li>
<li className="list-group-item">
Ratings: <span>{book.rating}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
))}
</div>
{/* <BookDetail bookid={selected} /> */}
</div>
);
}
function BookList() {
return (
<div>{BooksDisplay()}</div>
);
}
export default BookList;

You need to iterate the columns instead of the container...
import React, { useState } from "react";
import { gql, useQuery } from "#apollo/client";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
const getBooksQuery = gql`
{
books {
name
id
genre
author {
name
}
description
rating
image
}
}
`;
function BooksDisplay() {
const { loading, error, data } = useQuery(getBooksQuery);
var [selected, setSelected] = useState("");
if (loading) return <p>Loading....</p>;
if (error) return <p>Ops! Something went wrong</p>;
return (
<div>
<div id="book-list">
<div className="container-fluid my-5 books_section">
<div className="row">
{data.books.map((book) => (
<div className="col-xl-3 col-lg-4 col-sm-6 col-12 mt-4">
<div className="card h-100">
<img src={book.image} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title font-weight-bold text-secondary">
{book.name}
</h5>
<span className="card-text">
{book.description}
<div className="collapse m-0" id="collapseExample">
<div className="card card-body border-0 p-0">
{book.description}
</div>
</div>
</span>
<a
className="card-link d-block"
data-toggle="collapse"
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample">
See More
</a>
</div>
<ul className="list-group list-group-flush">
<li className="list-group-item">
Authors:
<span>
{book.author.map((author) => author.name).join(" ")}
</span>
</li>
<li className="list-group-item">
Genre: <span>{book.genre.join(" ")}</span>
</li>
<li className="list-group-item">
Ratings: <span>{book.rating}</span>
</li>
</ul>
</div>
</div>
))}
</div>
</div>
</div>
{/* <BookDetail bookid={selected} /> */}
</div>
);
}
function BookList() {
return (
<div>{BooksDisplay()}</div>
);
}
export default BookList;

Just put these 2 tags out of the loop
< div className="container-fluid my-5 books_section">
< div className="row">
And it will work.

ReactJs how to get specific props data in child component

I get API data in DownloadsHistory.jsx and passed props in the child components like below code:
<DownloadData
downloadToday={d.today}// need that separatly
downloadYesterday={d.yesterday}
downloadLastWeek={d.last_week}
downloadAllTime={d.all_time}
/>
If I console in DownloadData.jsx get below data:
{downloadToday: "55628", downloadYesterday: "98569", downloadLastWeek: "720570", downloadAllTime: "143086901"}
I get all the props data if I called <DownloadHistory/>. that's fine but how can I get single data from it? Suppose I want only {this.props.downloadToday}. on a third.jsx
Add more details code below:
DownloadHistory.jsx
import React, { Component } from "react";
import axios from "./axios";
import DownloadData from "./download-view";
class DownloadsHistory extends Component {
state = {
data: [],
};
componentDidMount() {
var slug = "contact-form";
const url =
"https://api.xyz.com/downloads.php?slug=" +
slug +
"&limit=10&historical_summary=1";
axios.get(url).then((res) => {
this.setState({ data: res.data });
});
}
constructor(props) {
super(props);
this.state = {};
}
render() {
var d = this.state.data;
if (!d) return <div className="loading"></div>;
return (
<div>
<DownloadData
downloadToday={d.today}
downloadYesterday={d.yesterday}
downloadLastWeek={d.last_week}
downloadAllTime={d.all_time}
/>
</div>
);
}
}
export default DownloadsHistory;
download-view.jsx
import React, { Component, Fragment } from "react";
class DownloadData extends Component {
render() {
console.log(this.props);
return (
<Fragment>
<table className="table" style={{ fontSize: 13, textAlign: "left" }}>
<tbody>
<tr>
<td>Today</td>
<td>{this.props.downloadToday}</td>
</tr>
<tr>
<td>Yesterday</td>
<td>{this.props.downloadYesterday}</td>
</tr>
<tr>
<td>Last Week</td>
<td>{this.props.downloadLastWeek}</td>
</tr>
<tr>
<th>All Time</th>
<th>{this.props.downloadAllTime}</th>
</tr>
</tbody>
</table>
</Fragment>
);
}
}
export default DownloadData;
widget.jsx
import React, { Fragment, Component } from "react";
import { faStar, faCheck } from "#fortawesome/free-solid-svg-icons";
import DownloadsHistory from "./DownloadsHistory";
import ActiveVersion from "./active-version";
import Downloads from "./download";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
class Widget extends Component {
render() {
console.log(this.props);
return (
<Fragment>
<div className="row mt-5">
<div className="col-lg-3 col-md-3">
<div className="widget text-center">
<div className="widget-heading clearfix">
<div className="pull-left">Download Today</div>
</div>
<div className="widget-body clearfix pt-0">
<div className="pull-left">
<FontAwesomeIcon icon={faCheck} color="#28a745" />
</div>
<div className="pull-right number">
<DownloadsHistory /> {/* Need only Today Data here*/}
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-3">
<div className="widget text-center">
<div className="widget-heading clearfix">
<div className="pull-left">Download History</div>
</div>
<div className="widget-body clearfix pt-0">
<DownloadsHistory /> {/* okay here */}
</div>
</div>
</div>
<div className="col-lg-3 col-md-3">
<div className="widget text-center">
<div className="widget-heading clearfix">
<div className="pull-left">Active Install</div>
</div>
<div className="widget-body clearfix pt-0">
<div className="pull-left">
<FontAwesomeIcon icon={faCheck} color="#28a745" />
</div>
<div className="pull-right number">
{this.props.active_installs}+
<div style={{ fontSize: 13 }}>
but less than {this.props.probable_active_install}
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-3">
<div className="widget text-center">
<div className="widget-heading clearfix">
<div className="pull-left">Average Ratings</div>
</div>
<div className="widget-body clearfix">
<div className="pull-left">
<FontAwesomeIcon icon={faStar} color="#28a745" />
</div>
<div className="pull-right number">{this.props.AvgRating}</div>
<div style={{ fontSize: 13 }}>
based on {this.props.number_of_rating} reviews
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-3">
<div className="widget text-center">
<div className="widget-heading clearfix">
<div className="pull-left">Download History</div>
</div>
<div className="widget-body clearfix pt-0">
<DownloadsHistory />
</div>
</div>
</div>
<div className="col-lg-6 col-md-6">
<div className=" text-center">
<div className="clearfix">
<div className="pull-left">Active version</div>
</div>
<div className="clearfix pt-0">
<ActiveVersion />
</div>
</div>
</div>
</div>
</Fragment>
);
}
}
export default Widget;
** widget.jsx has some props from another parent.

Form your description I'm assuming that the DownloadData component is being rendered inside the DownloadHistory component. If it's the case, then you can simply place the Third component along with the DownloadData component and pass the downloadToday={d.today} only into the Third component.
Like this:
<DownloadData
downloadToday={d.today}// need that separatly
downloadYesterday={d.yesterday}
downloadLastWeek={d.last_week}
downloadAllTime={d.all_time}
/>
<Third downloadToday={d.today} />
Hope this will help.

You need to call the web service from the parent of both and pass the props to components.

How to Integrate html with ReactJS

I am working on the reactjs project.
what happened
I have following reactjs code written into javascript file.
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import ReactBootstrap, { Jumbotron, Container, Row, Col, Column, Image, Button } from 'react-bootstrap';
class Homepage extends Component {
render() {
return (
<aside id="fh5co-hero">
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(../../Assets/images/img_bg_1.jpg);">
<div class="overlay-gradient"></div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center slider-text">
<div class="slider-text-inner">
<h1>abc</h1>
<p><a class="btn btn-primary btn-lg" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_2.jpg);">
<div class="overlay-gradient"></div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center slider-text">
<div class="slider-text-inner">
<h1>abc</h1>
<p><a class="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_3.jpg);">
<div class="overlay-gradient"></div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center slider-text">
<div class="slider-text-inner">
<h1>abc</h1>
<p><a class="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
);
}
}
export default Homepage;
what is issue
when i try to compile using npm start , it throws following error :
Error: The style prop expects a mapping from style properties to
values, not a string. For example, style={{marginRight: spacing +
'em'}} when using JSX.
in li (at homePage.js:13)
in ul (at homePage.js:12)
in div (at homePage.js:11)
in aside (at homePage.js:10)
in Homepage (created by Context.Consumer)
not able to understand, how to integrate html code into reactjs router dom. is this something style issue OR the version mismatch issue.
version details :
react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",
please suggest.

ReactJs uses JSX instead of html (https://reactjs.org/docs/introducing-jsx.html). There are some differences, for example, instead of "class" you must use "className". Instead
style="background-image: url(images/img_bg_2.jpg)";
you must use
style={{backgroundImage: 'url(images/img_bg_2.jpg)'}}
Your code should look like this:
<aside id="fh5co-hero">
<div className="flexslider">
<ul className="slides">
<li style={{backgroundImage: 'url(../../Assets/images/img_bg_1.jpg)'}}>
<div className="overlay-gradient" />
<div className="container">
<div className="row">
<div className="col-md-8 col-md-offset-2 text-center slider-text">
<div className="slider-text-inner">
<h1>abc</h1>
<p><a className="btn btn-primary btn-lg" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
<li style={{backgroundImage: 'url(images/img_bg_2.jpg)'}}>
<div className="overlay-gradient" />
<div className="container">
<div className="row">
<div className="col-md-8 col-md-offset-2 text-center slider-text">
<div className="slider-text-inner">
<h1>abc</h1>
<p><a className="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
<li style={{backgroundImage: 'url(images/img_bg_3.jpg)'}}>
<div className="overlay-gradient" />
<div className="container">
<div className="row">
<div className="col-md-8 col-md-offset-2 text-center slider-text">
<div className="slider-text-inner">
<h1>abc</h1>
<p><a className="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>

by default react( aka: JSX ) can't have inline styles like what you pasted therem you need to convert them to JSS style like below:
// for example "background-image: url(images/img_bg_3.jpg);
<li style={{ backgroundImage: 'url(SOME_IMAGE_URL)' }}> ... </li>
<li style={{ backgroundImage: `url(${IMPORTED_IMAGE})` }}> ... </li>

This code <li style="background-image: url(../../Assets/images/img_bg_1.jpg);">
Should be <li style={{backgroundImage: 'url(../../Assets/images/img_bg_1.jpg)'}}>
The style prop in React expects an object and not a CSS string.

The style attribute is written in react js as follows
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
}}
Note that we can't use dash between words (-) flex-direction is turned to felxDirection and so on
also the value has to be put inside single or double quotes

How to use JavaScript with $ inside render() in Reactjs

I work on content editor in React admin interface.
And I'd love to install my favorite block content editor. But it's an old one and have no react version.
I know how to link .js and .css in head with ReactHelmet
But have no idea how to run following script:
<script>
$(function () {
$("#editor").brickyeditor({
ignoreHtml: true,
blocksUrl: 'data.json',
templatesUrl: 'templates.html',
onChange: function(data) {
console.log(data.html);
}
});
});
</script>
Here is initial html structure
<body>
<header>
<nav class="container navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">BrickyEditor</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://brickyeditor.info/examples.html">More Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/yakovlevga/brickyeditor">GitHub Repository</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="editor"></div>
</div>
</div>
</div>
</div>
</main>
</body>
Im using it like so:
import PageTitle from "../components/common/PageTitle";
import Helmet from "react-helmet";
import $ from 'jquery';
class NewsEditor extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
const {
} = this.state;
return (
<Container fluid className="main-content-container px-4">
{/* Page Header */}
<Row noGutters className="page-header py-4">
<PageTitle sm="4" title="News editor" subtitle="Drag and drop interface" className="text-sm-left" />
</Row>
<Helmet
title="Nested Title"
link={[
{"rel": "stylesheet", "href": "https://cdn.jsdelivr.net/npm/brickyeditor/dist/jquery.brickyeditor.min.css"}
]}
script={[
{"src": "https://cdn.jsdelivr.net/npm/brickyeditor/dist/jquery.brickyeditor.min.js"},
]}
/>
<header>
<script>
$(function () {
$("#editor").brickyeditor({
ignoreHtml: true,
blocksUrl: 'data.json',
templatesUrl: 'templates.html',
onChange: function(data) {
console.log(data.html);
}
});
});
</script>
<nav class="container navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">BrickyEditor</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://brickyeditor.info/examples.html">More Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/yakovlevga/brickyeditor">GitHub Repository</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="editor"></div>
</div>
</div>
</div>
</main>
</Container>
);
}
}
export default NewsEditor;
On this stage all I have is Failed to compile error.
UPD: Following advices I keep on getting TypeErrors

I always make re-usable components for external libraries. So in your case, it would be BrickyEditor component which could look like this:
class BrickyEditor extends React.Component {
editorRef = React.createRef();
componentDidMount() {
window.$(this.editorRef.current).brickyeditor(this.props);
}
render() {
return <div ref={this.editorRef}></div>
}
}
// in your NewsEditor component you can use it like so
<BrickyEditor
ignoreHtml={true}
blocksUrl="data.json"
templatesUrl="templates.html"
onChange={function(data) {
console.log(data.html);
}}
/>