Develop Reference

Routing not working using Gatsby - reach-router

I'm trying to render a blog as a card then open it up as a page , but its proving to be difficult using Gatsby. I did the exact same thing fine with react using React router but it doesn't seem to be working with Gatsby. I know I can use GraphQL but surely I can do the same thing using REST. Im using Contentful btw
I switched to reach router as suggested in another post but that doesnt work.
I kept getting this error when I used react-router-dom:
Invariant failed: You should not use <Link> outside a <Router>
Fetching Blog contents
function Blog() {
const [blogs, setBlogs] = useState([])
const [image, setImage] = useState()
const [selectedBlog, setSelectedBlog] = useState(blogs)
useEffect(() => {
fetch("http://cdn.contentful.com...")
.then(response => response.json())
.then(data =>
setBlogs(data.items)
)
}, [])
console.log(blogs)
return (
<>
<div className="card-flex" >
{selectedBlog !== null ? blogs.map((blog =>
<Card title={blog.fields.title} date={blog.fields.date} introduction={blog.fields.introduction} mainBody1={blog.fields.mainBody1} mainBody2={blog.fields.mainBody2} setSelectedBlog={selectedBlog}
/>
)):
<Article title={blogs.find(d => d.fields.title === selectedBlog)} />
}
</div>
</>
)
}
export default Blog
Blog Card
function Card(props) {
console.log(props)
return (
<div class="container">
<div class="card">
<div class="card-header">
<img style={{backgroundImage: "url('https://i.pinimg.com/564x/7f/bb/97/7fbb9793b574c32f5d28cae0ea5c557f.jpg')"}}/>
</div>
<div class="card-body">
<span class="tag tag-teal">{props.tags}</span>
<h4>{props.title}</h4>
<p style={{fontSize:"17px", paddingTop:"10px"}} >{props.introduction}</p>
<div class="card-user">
<Link
to={{
pathname: '/article',
state: {
title: props.title,
introduction: props.introduction
}
}}
>
<button>read more</button>
</Link>
<div class="user-info">
<h5 >{ props.date}</h5>
</div>
</div>
</div>
</div>
</div>
)
}
export default Card
**Article **
import React from 'react'
import './Article.css'
import { useLocation } from "#reach/router"
function Article(props) {
// useLocation to access the route state from Blog.js
const { state = {} } = useLocation();
console.log(state)
return (
<div className="main">
<h1 className="title">{state.title}</h1>
<p className="intro">{state.introduction}</p>
<p className="main1">{state.mainBody1}</p>
<p className="main2">{state.mainBody2}</p>
</div>
)
}
export default Article

I think you are mixing stuff. Gatsby extends from #reach/router so you don't need to use its notation. Your Link should look like:
<Link
to={`/article`}
state={{
title: props.title,
introduction: props.introduction
}}
>
Assuming your /article page exists under /pages folder.

How to render Array stored in a Object in React?

I am trying to develop a discussion forum website using React, Node and MongoDB.In post object, there is nested author object and tags array.
Here is sample image of a post object:
here is the component which I am trying to render:
import React, { Component } from "react";
import http from "../services/httpService";
import { postEndPoint, repliesEndPoint } from "../config.json";
class PostPage extends Component {
state = {
post: [],
replies: [],
};
async componentDidMount() {
const id = this.props.match.params.id;
const { data: post } = await http.get(postEndPoint + "/" + id);
const { data: replies } = await http.get(repliesEndPoint + "/" + id);
console.log(post.tags, typeof post.tags);
this.setState({ post: post, replies: replies });
}
render() {
const { post, replies } = this.state;
return (
<React.Fragment>
<div className="container col-lg-8 shadow-lg p-3 mt-5 bg-body rounded">
<h2>{post.title}</h2>
<p className="mt-4" style={{ color: "#505050" }}>
{post.description}
</p>
<div className="mt-1">
Related Topics:
{post.tags.map((tag) => (
<span className="badge badge-secondary m-1 p-2">
{(tag).name}
</span>
))}
<h6 className="mt-2">
{post.upvotes.length} Likes {post.views} Views
</h6>
<div class="d-flex w-100 justify-content-between">
<small class="mb-1">Posted by {post.author['name']}</small>
</div>
</div>
</div>
</React.Fragment>
);
}
}
export default PostPage;
This throws the following : TypeError: post.tags is undefined. a Similar error is throws while accessing post.upvotes and post.author

Since you do your http request in 'componentDidMount' a render occured at least once before. So react tried to read post.something and it was still undefined.
And even if you do it before an http request is asynchronous so be careful
You need to check that post.something is defined before you use.
Also your initialisation if confusing you initialize post as an array but you are trying to do post.title.
If post is really an array then post.map() won't crash on an empty array.
If it's an object check that is it defined correctly.
Try this as initial state
state = {
post: {
description:"",
title:"",
tags: [],
author:[] ,
upvotes:[] ,
views : 0
},
}

initial state for post is {}
state = {
post: { tags: [] },
replies: [],
};

You can have a simple if condition added. So it will only loop through that if it is present. Check this.
import React, { Component } from "react";
import http from "../services/httpService";
import { postEndPoint, repliesEndPoint } from "../config.json";
class PostPage extends Component {
state = {
post: [],
replies: [],
};
async componentDidMount() {
const id = this.props.match.params.id;
const { data: post } = await http.get(postEndPoint + "/" + id);
const { data: replies } = await http.get(repliesEndPoint + "/" + id);
console.log(post.tags, typeof post.tags);
this.setState({ post: post, replies: replies });
}
render() {
const { post, replies } = this.state;
return (
<React.Fragment>
<div className="container col-lg-8 shadow-lg p-3 mt-5 bg-body rounded">
<h2>{post.title}</h2>
<p className="mt-4" style={{ color: "#505050" }}>
{post.description}
</p>
<div className="mt-1">
Related Topics:
{post.tags && post.tags.map((tag) => ( // <--- map will only execute when it finds tags.
<span className="badge badge-secondary m-1 p-2">
{(tag).name}
</span>
))}
<h6 className="mt-2">
{(post.upvotes && post.upvotes.length) || 0} Likes {post.views} Views // <---- These default values too will handle the case where the data isnt ready yet
</h6>
<div class="d-flex w-100 justify-content-between">
<small class="mb-1">Posted by {post.author['name']}</small>
</div>
</div>
</div>
</React.Fragment>
);
}
}
export default PostPage;

I am getting data from firebase after page refresh in react

I am trying to render a list of orders in the your orders page using firebase as a backend and react as a front end. When I click a your order button it shows nothing and when refresh the page it displays the data . I want the data to be displayed without refreshing the page.
here is my code for following question.
import React , {useState , useContext , useEffect} from 'react'
import { useParams } from 'react-router-dom'
import { JobContext } from '../../context/JobContext'
import { UserContext } from '../../context/UserContext'
import { db } from '../../Firebase'
import Order from './Order'
import './YourOrder.css';
import { Container, Row } from 'react-bootstrap';
import { IoIosShare } from "react-icons/io";
import { BsChevronRight } from "react-icons/bs";
import { Link } from 'react-router-dom'
import { PaymentContext } from '../../context/PaymentContext'
import { OrderContext } from '../../context/OrderContext'
const YourOrder = () => {
//window.location.reload(false)
const [user , setUser]=useContext(UserContext)
const [order , setOrder]=useContext(OrderContext)
const { userrid } = useParams()
const [payment , setPayment]=useContext(PaymentContext)
useEffect(() => {
var priceRef = db.collection("clients").doc(userrid).collection("jobDetails")
priceRef.orderBy("timestamp", "desc").get().then(snapshot=>{
setOrder(snapshot.docs.map((doc) => ({ jobdetailid: doc.id, ...doc.data() })))
})
}, [user , order])
return (
<div className="All_orders_main_container">
<h2 className="text-center mb-2">Your Orders</h2>
{order.length!==0 ?
order.map(item=>{
return item.payment_id!=="" ?<Link to={`/vieworder/${item.jobdetailid}/${userrid}`} >
<Container className="your-orders">
<div className="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 pl-0">
</div>
<div className="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 bordered">
<div className="row">
<div className="col-xl-2 col-lg-2 col-md-4 col-sm-4 col-4">
<img src={item.image} alt="graphic_design_ordered-img" className="order_img"/>
</div>
<div className="col-xl-9 col-lg-9 col-md-6 col-sm-6 col-6 details">
<p className="job_name">{item.Name}</p>
<p className="job_deliverydate">ordered on {item.orderDate}</p>
{/* <p className="job_share pt-1"><IoIosShare className="share_icon"/>Share this item</p> */}
</div>
<div className="col-lg-1 col-md-2 col-sm-2 col-2 open_icon text-right">
<BsChevronRight/>
</div>
</div>
</div>
</Container>
</Link>
: null
})
:
<h1 className="text-center" style={{color : '#c1c1c1', marginTop: 50}}>No Orders</h1>
}
</div>
)
}
export default YourOrder
please guide me for the same

You can use onSnapshot(), which makes your app "listen" for changes on ta document or multiple documents. https://firebase.google.com/docs/firestore/query-data/listen

As we know that the data transfer takes time, we have to either await for the response or, you have to use the onSnapShot() method that will await the response from firebase and then set your list of items,
As per the comment , try removing the [user , order] from the useEffect as it will render your content only if the user or orders list has changes, so instead just pass it as a empty list, thus it will fire on startup,
example :
const [orders, setOrders] = useState([]);
useEffect(()=>{
//The logic here will fire on startup , thus setting your order state from here will work
setOrders() //from here
}, [])
This is the approach for local setup, if you want your data to be globally available, I see you are using context, thus use Reducers to set the state declare a method and call it in here after you get the data
Kindly follow the above approach
Happy Coding

Pass json data from one component to an other. Vue.js

I'm trying all day to figure out how to pass data from one component to another. I have read a lot of relevant tutorials and instructions, unfortunately with out luck.
I have fetched some data from an api and i present them in the home.vue
and i want to pass the data into a new file to generate a page that will show a random product from the list.
Maybe the approach is totally wrong, but it is the first time that i use vue components, i have experience just with the instance
I'm trying to implement it using props to return the data to the new page.
Here is the randomize.vue file where I would like to pass my data
<template>
<div class="hello">
<p> {{ this.propsdata[0].e }} </p>
<h1>dla;dl;djal;d</h1>
</div>
</template>
<script>
export default {
name: "randomize",
props: ["propsdata"],
data() {
return {
obj: this.propsdata
};
},
mounted(){
console.log(this.props);
},
};
</script>
This is the home.vue file that i fetch the data
<template>
<div>
<div class=" main-conte" >
<randomize :propsData=toBeShown />
<transition-group name="fade" tag="div" id="container" class=" row " >
<figure v-for="(value,index) in toBeShownOrdered" id="page-wrap" :key="index" class="beer-container col-xs-6 col-sm-6 col-lg-4 col-xl-2" >
<a >
<img #click="goTodetail(value.id)" class="logo lazy img-responsive loaded" v-bind:src="getMissingImg(index)"/>
<figcaption>
<div class="beer-title">{{value.name}}</div>
<div class="beer-availability"> {{value.tagline}}</div>
<div class="learn-more">
<h4 class="beer-info-title">Format</h4>
<span class="serving-icons"></span>
<div class="serving">
<i v-if="value.abv >= 0 && value.abv <=6 " class="fas fa-wine-glass-alt"></i>
<i v-if="value.abv >= 6 && value.abv <=7" class="fas fa-glass-cheers"></i>
<i v-if="value.abv >= 7 && value.abv <=100" class="fas fa-wine-bottle"></i>
<span class="measure">{{value.abv}}</span>%</div>
</div>
</figcaption>
</a>
</figure>
</transition-group>
<div class=prev-next>
<button #click="orderByName = !orderByName">Click Me!</button>
<button class="prev" #click="prevPage" :disabled="currentPage==1">
<i class="fas fa-angle-double-left"></i></button>
<button class="next" #click="nextPage" :disabled="currentPage == totalPages">
<i class="fas fa-angle-double-right"></i> </button>
</div>
</div>
<div>
</div>
</div>
</template>
<script>
import { mdbView, mdbMask } from "mdbvue";
import FadeTransition from "./fade-transition.vue";
import randomize from "#/components/randomize";
export default {
name: "home",
components: {
mdbView,
mdbMask,
FadeTransition,
randomize
},
data() {
return {
items: [],
message: '',
currentPage: 1,
orderByName: false,
};
},
computed: {
//show more less products
toBeShown() {
return this.items.slice(0, this.currentPage * 5);
},
totalPages() {
return Math.ceil( this.items.length / 4);
},
toBeShownOrdered() {
return this.orderByName ? _.orderBy(this.toBeShown, 'name', 'asc') : this.toBeShown;
}
},
mounted() {
this.fetchData();
},
methods: {
fetchData: function() {
const myRequest = new Request("https://api.punkapi.com/v2/beers");
fetch(myRequest)
.then(response => {
return response.json();
})
.then(data => {
this.items = data;
console.log(this.items);
})
.catch(error => {
console.log(error);
});
},
getMissingImg(index) {
return this.images[index];
},
nextPage(){
if(this.currentPage < this.totalPages) this.currentPage++;
},
prevPage(){
this.currentPage = this.currentPage - 1 || 1;
},
goTodetail(prodId) {
let proId=prodId
this.$router.push({name:'blog',params:{Pid:proId}})
},
index.js
import Vue from 'vue'
import Router from 'vue-router'
import home from '#/components/home'
import blog from '#/components/blog'
import randomize from '#/components/randomize'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: home,
props:true
},
{
path: '/blog/:Pid',
name: 'blog',
component: blog,
props:true
},
{
path: '/randomize/',
name: 'randomize',
component: randomize,
props:true
},
]
})

You would benefit from using vuex as it will keep your state at the application level (as opposed to component data which keeps each component state at the component level).
Setting up vuex requires a bit more work and has a learning curve, but unless you won't grow your app to a medium/large size it will in the long term benefit you by decreasing the overall complexity of your app.
In short, all components from your app can access the state stored in vuex without having to deal with props. And from any component, you can dispatch actions implemented in your vuex store to alter the vuex state. Vuex will help keeping your components focused on presenting data and capturing user actions.
To ease setting up a Vue app with vue-router and vuex, you could choose to build your app with nuxt.js which is a framework that provides you with vue+vue-router+vuex with no effort. Nuxt.js will also help setting up server side rendering which would be beneficial to SEO if your app is to be indexed by search engines.

Map inside map in react ( one is local array of images and the other is title from json )

As being designer and novice to react, I developed code in which local array is displaying as image and json data as title. Titles are working fine but images are not displaying and showing all of arrays in src attribute.
I have used Axios.get() to fetch data from the server.
I am missing out in logic somewhere while developing map inside map. I would be grateful for getting help.
EDIT : I want one image with one title.
CommonMeds.js
import React, { Component } from 'react';
import './CommonMeds.scss';
import MedSection from '../../Components/MedSection/MedSection';
import Axios from 'axios';
class CommonMeds extends Component {
state = {
MedTitle: [],
TitleImg: [
{ imageSrc: require('../../../../images/medstype_1.svg') },
{ imageSrc: require('../../../../images/medstype_2.svg') },
{ imageSrc: require('../../../../images/medstype_3.svg') },
{ imageSrc: require('../../../../images/medstype_4.svg') },
{ imageSrc: require('../../../../images/medstype_5.svg') },
{ imageSrc: require('../../../../images/medstype_6.svg') },
{ imageSrc: require('../../../../images/medstype_7.svg') },
{ imageSrc: require('../../../../images/medstype_8.svg') },
{ imageSrc: require('../../../../images/medstype_9.svg') },
{ imageSrc: require('../../../../images/medstype_10.svg') },
]
};
componentDidMount() {
const medInfo = Axios.get('URL OF JSON DATA');
medInfo.then( response => {
this.setState({MedTitle: response.data.result});
});
}
render() {
const Meds = this.state.MedTitle.map(med => {
const imglable = this.state.TitleImg.map(src => {
return src.imageSrc;
})
return <MedSection
Title={med.medicationCategory}
src = {imglable}
/>;
});
return(
<div className="container">
<h3 className="text-left">Common Medicines with Categories</h3>
<hr />
{Meds}
</div>
);
}
}
export default CommonMeds;
MedSection.js
import React from 'react';
import './MedSection.scss';
import MedicineList from '../MedicineList/MedicineList';
const MedSection = (props) => {
return (
<div className="col-12">
<div className="row">
<div className="col-12 col-md-3 col-lg-2 px-0">
<div className="c-medsimg-box py-4 px-2">
<img src={props.src} alt="Medication Type Icon" className="img-fluid" />
<h5 className="mt-3" key={props.key}>{props.Title}</h5>
</div>
</div>
<div className="col-12 col-md-9 col-lg-10">
<div className="h-100 d-flex align-items-center">
<ul className="c-medslist-ul pl-0 mb-0">
<MedicineList />
</ul>
</div>
</div>
</div>
<hr />
</div>
)
}
export default MedSection;

You are currently creating an array of images for each MedTitle. You could instead take the entry from TitleImage that has the same index as the current med in your loop instead.
You can also make it safe by using the % operator, so that if your MedTitle array is larger than your TitleImage array, you will still get an image.
const Meds = this.state.MedTitle.map((med, index) => {
const src = this.state.TitleImg[index % this.state.TitleImg.length].imageSrc;
return <MedSection Title={med.medicationCategory} src={src} />;
});

As long as length of both arrays are same, it will work.
Try using this.
const imglable = this.state.TitleImg.map(src => {
return src.imageSrc;
})
const Meds = this.state.MedTitle.map((med, index) => {
return <MedSection
Title={med.medicationCategory}
src = {imglable[index]}
/>;
});