Develop Reference

How to add hyperlink to array format in react.js?

I want to add a hyperlink by put that url info to data array.
But the anchor tag with href does not work as I thought.
Should I use react-router-dom's Link tag? Or would there be any clue to add hyperlink when I add {link} on Goods.js?
#1 Shop.js
export const Shop = () => {
return (
<div className="shop">
<div className="shop-title">
<h1>Anime Biased Shop</h1>
</div>
<div className="items">
{ItemsList.map((item) => (
<Goods shopItemProps={item} />
))}
</div>
</div>
);
};
#2 Goods.js
import React, { useState } from "react";
export const Goods = (props) => {
const { id, name, price, image, link } = props.shopItemProps;
const [count, setCount] = useState(0);
return (
<>
<div className="goods">
<div>{id}</div>
<img src={image} alt="thumbnail_image" />
<div className="goods-name">{name}</div>
<div className="goods-price">${price}</div>
<a href={link} />
<div className="cart-button">
<button onClick={() => setCount(count - 1)}>-</button>
{count}
<button onClick={() => setCount(count + 1)}>+</button>
</div>
</div>
</>
);
};
#3 ItemsList.js (the data array file I mentioned)
export const ItemsList = [
{
id: 1,
name: "VA-11 Hall-A: Cyberpunk Bartender Action",
price: 110000,
image: cover1,
link: "https://store.steampowered.com/app/447530/VA11_HallA_Cyberpunk_Bartender_Action/?l=koreana",
},

There are two options.
1. External links or redirect with page refresh
If it is external link, to other website you should use a. This looks nice
<a href={link} />
but can be not visible, because you do not have any content in this link. You can change it to:
<a href={link}><button>Click me</button></a>
2. Internal links without page reload
If it is internal link, you should remove domain, eg by replace function and use Link if you using next
<Link href="/about">About Us</Link>
https://nextjs.org/docs/api-reference/next/link
or Redirect if you using react-router-dom
<Redirect to='/profile' />
https://www.telerik.com/blogs/programmatically-navigate-with-react-router
In both cases you should add something inside of this element or add classes that make id visible.

You Can Test click me
or React Router Dom like this :
const data = [
{
name: "john",
profile: "/profile",
linkTo: "/user/john",
},
];
{
data.map((item, index) => {
return (
<Link to={item.linkTo}>
<h1>name:{item.name}</h1>
<Link to={item.profile}>
<h5>editProfile</h5>
</Link>
</Link>
);
});
}

Next.js markdown-blog page code not working

import { Blogs } from "../../components/Data"
import Image from "next/image";
import Link from "next/link";
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
export default function index({ posts }) {
// const Short_Blog = Blogs.map(item =>
// <div className="BLOGS_Projects" key={item}>
// <div className="BLOGS_Projects_Image">
// <Image
// className='BLOGS_Projects_image'
// src={item['img-1']}
// layout='fill'
// // objectFit='contain'
// />
// </div>
// {/* if someone clicks on this link i want them to go to [project].js and send This item to [projcet].js */}
// <Link href={'/blogs/' + Blogs.indexOf(item)}>
// <a>{item['title']}</a>
// </Link>
// <p>{item['desc']}</p>
// </div>
// );
return (
<div className="BLOGS_Container">
<div className="BLOGS_Sub_Container">
<div className="BLOGS_New">
<h1 style={{ marginLeft: 25 + 'px' }}>Cyber-Security Blogs</h1>
<div className="BLOGS_Present">
{posts.map( post =>{
<h1 style={{zIndex: '10000'}}>{post}</h1>
})}
</div>
</div>
</div>
</div>
)
}
export async function getStaticProps() {
const files = fs.readdirSync(path.join('posts'))
const posts = files.map((filename) => {
const slug = filename.replace('.md', '')
const markdownWithMeta = fs.readFileSync(path.join('posts', filename), 'utf-8')
const { data: frontmatter } = matter(markdownWithMeta)
return {
slug,
frontmatter
}
})
return {
props: {
posts,
},
}
}
The posts object does exist but when I try to use it in the HTML, it doesn't show up anyone got any idea why this is happening?
the posts.map that I used is not giving any errors but it also doesn't show any h1 html in actual page, the actual page seems blank.

You need to return the element to render inside the callback of map function.
1st way
{posts.map((post) => {
return <h1 style={{ zIndex: "10000" }}>{post}</h1>;
})}
2nd way
{posts.map((post) => (
<h1 style={{ zIndex: "10000" }}>{post}</h1>
))}

React will not render plain html content as a string. You need to use the dangerouslySetInnerHTML prop, like so:
{
posts.map((post) => {
return <div dangerouslySetInnerHTML={{__html: post}}></div>
})
}
You can read more about it here:
https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
Alternatively you can use something like next-mdx-remote, which you can learn about here:
https://github.com/hashicorp/next-mdx-remote

React - JSON file won't render

I am building out a row of react-icons. When selected the icons to display content from a static .JSON file. I am trying to combine the following events:
Change color when clicked
Change/Switch between the static .JSON content when clicked.
I tried to combine the 2 actions inline based on this post.
However, only the color changes, not the .JSON data.
Thank you in advance, any help or guidance would be appreciated.
Here is my code below:
import React, { useState } from "react";
import "../Styles/arrow.css";
import { BsFillPeopleFill } from "react-icons/bs";
import { GiLinkedRings } from "react-icons/gi";
import { GoArrowRight } from "react-icons/go";
function Icon(props) {
const handleClick = (messageKey) => () => props.setSelectedIcon(messageKey);
const [bg, changeBGColor] = React.useState(1);
return (
<div className="icon-arrow">
<div className="arrow">
<div className="arrow-line" />
<div className="arrow-icon">
<GoArrowRight />
</div>
</div>
<div className="icons">
<GiLinkedRings
className="rings"
onClick={() => {
handleClick("rings");
changeBGColor(1);
}}
style={{
backgroundColor: bg === 1 ? "#e3e1dc" : "#ae7a67",
}}
/>
<BsFillPeopleFill
className="family"
onClick={() => {
handleClick("family");
changeBGColor(2);
}}
style={{
backgroundColor: bg === 2 ? "#e3e1dc" : "#ae7a67",
}}
/>
</div>
</div>
);
}
export default Icon;
My .JSON Data: iconmessage.json
{
"rings": {
"image": "rings.jpg",
"title" : "Rings",
"message":"Lorem Ipsum"
},
"family": {
"image": "family.jpg",
"title" : "Family is essential",
"message":"Lorem Ipsum"
}
}
Icons/.JSON being pulled from IconMessage.JSX
import React from "react";
import "../Styles/iconmessage.css";
import messages from "../Static/iconmessage.json";
function IconMessage(props) {
const message = messages[props.selectedIcon]
return (
<div className="icon-message">
<div className="title-message">
<div className="title">{message.title}</div>
<div className="message">{message.message}</div>
</div>
<div className="image">
<img src={`/images/${message.image}`} alt="" srcset="" />
</div>
</div>
)
}
export default IconMessage

What you did what correct from the onClick perspective. I'd say that the problem is the value you pass. Are you sure that when you pass "rings" to selectedIcon, it should render the JSON as you'd wish?
I think the problem is that you access messages.title, messages.message, instead of messages.image.title, messages.image.message.

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 extend a page in Nextjs. Like a nested switch in react-router-dom

I have been using react for sometime,I decided to try out nextjs. I am building a dashboard, that have a side navigation, and several pages will use that sidebar. What i do in reactjs is have a nested switch. And define my routes. Something like this:
<Switch>
<Route path="/pageOne">
<PageOne />
</Route>
<Route path="/pageTwo">
<pageTwo />
</Route>
</Switch>
but I have gone through a lot of resources, but non seems to talk about extending a page. Another option I am thinking of is to create a subfolder in the dashboard folder, then I will need to import the sidebar component on all the other pages, but this method breaks the DRY principle.
What is the better way to do this?
EDIT
This is what I am trying to archive. When I click the links in the sidebar, I navigate just the right side of the page, while the sidebar persists across the page.

if you're referring to the capacity to dynamically generate pages by appending a given value to some subpage "X" like the behavior that Switch provides, then you should check out the docs on dynamic router
Everything in Next is highly reusable, as it's extremely unopinionated about many things
If you want to dynamically generate subsubpages or subsubsubpages even off of some given pages subdirectory, then you can use the [dynamic].tsx filename and generate static paths using getStaticPaths followed with getStaticProps OR getServerSideProps (which does not use getStaticPaths). To clarify, Next's architecture, you are executing on both the server and the client in the same file when using a pages file (excluding pages/* and pages/api* routes). The pages/api routes are serverless node environments and can be fetched from the default export on the client of any non-pages/* pages/* file. getStaticProps still executes on the server and therefore contributes 0 to your bundle size. Same goes for getStaticPaths. You only need the latter when using getStaticProps within a dynamic file-type ([dynamic].tsx [...dynamic-catch-all].tsx, [[...dynamic-catch-all-optional]].tsx)
check out my profile for some repos with dynamic routing if you'd like
If I'm being honest I had to refresh myself on what the Switch wrapper achieves in CRApp because it's been so long since I've worked in it. I have been using Next with TSX for over a yr now so feel free to shoot any follow up ?s.
Here's an example from a recent client project which dynamically generates 25+ gallery subpages during build
components/Gallery/gallery.tsx
import Image, { ImageLoaderProps } from 'next/image';
import { Timestamp, Container } from '#/components/UI/index';
import { parseUrl } from '#/lib/helpers';
import Link from 'next/link';
import { Gallery } from '#/types/booksy/media';
export default function GalleryMapped({
images,
images_count,
images_per_page
}: Gallery) {
const GalleryImageLoader = ({
src,
width,
quality
}: ImageLoaderProps) => {
return `${src}?w=${width}&q=${quality || 75}`;
};
return (
<Container className='max-w-7xl mx-auto m-12 container'>
<ul
role='list'
className='grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3 max-w-7xl mx-auto'
>
<span className='sr-only'>{images_per_page}</span>
{images
.map((photo, i) => {
const targetedThumbnail = photo.thumbnails['640,0-hr'].url;
// console.log('target: ', targetedThumbnail);
const thumbnailDecoded = decodeURI(targetedThumbnail);
// console.log('decoded: ', thumbnailDecoded);
const fragmentThumbnailURI = parseUrl(thumbnailDecoded);
// console.log('URI Fragments: ', fragmentThumbnailURI);
const thumbnailReconstructed = `${fragmentThumbnailURI!.baseUrl.concat(
fragmentThumbnailURI!.pathname
)}`;
// console.log('reconstructed: ', thumbnailReconstructed);
return (
<li key={i++} className='relative'>
<div className='group cover block w-full rounded-xl bg-redditBG focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-gray-100 focus-within:ring-indigo-500 overflow-hidden'>
<Link
href='/gallery/[id]'
as={`/gallery/${photo.image_id}`}
passHref
shallow={true}
scroll={true}
>
<a id={`/gallery#${photo.image_id}`}>
<Image
loader={GalleryImageLoader}
src={thumbnailReconstructed ?? photo.image}
width='1280'
height='1294'
alt={`${photo.description ?? photo.category}`}
quality={100}
className='object-cover pointer-events-none group-hover:opacity-75 shadow-cardHover'
/>
</a>
</Link>
<button
type='button'
className='absolute inset-0 focus:outline-none'
>
<span className='sr-only'>
View details for {photo.image_id}
</span>
</button>
</div>
<p className='mt-2 block text-sm font-medium text-olive-300 truncate pointer-events-none'>
<Timestamp timestamp={photo.created} />
</p>
<p className='block text-sm font-medium text-gray-500 pointer-events-none'>
{`${++i}/${images_count}`}
</p>
</li>
);
})
.reverse()}
</ul>
</Container>
);
}
Then, it's imported into the pages/gallery/[id].tsx where getStaticPaths and getStaticProps are injected with server-fed props of the current incoming data by apollo client and SWR.
pages/Gallery/[id].tsx
import {
GetStaticPropsContext,
GetStaticPropsResult,
GetStaticPathsContext,
InferGetStaticPropsType
} from 'next';
import { initializeApollo, addApolloState } from '#/lib/apollo';
import {
DynamicNavDocument,
DynamicNavQueryVariables,
DynamicNavQuery,
WordpressMenuNodeIdTypeEnum
} from '#/graphql/generated/graphql';
import { AppLayout } from '#/components/Layout';
import { useRouter } from 'next/router';
import { Container, Fallback } from '#/components/UI';
import useSWR from 'swr';
import { fetcherGallery } from '#/lib/swr-fetcher';
import { Gallery } from '#/types/booksy/media';
import { Configuration, Fetcher } from 'swr/dist/types';
import {
getLatestBooksyPhotos,
getBooksyPhotoById
} from '#/lib/booksy';
import Image, { ImageLoaderProps } from 'next/image';
import { parseUrl } from '#/lib/helpers';
export async function getStaticPaths({
locales
}: GetStaticPathsContext): Promise<{
paths: string[];
fallback: false;
}> {
const data: Response = await getLatestBooksyPhotos();
const pathsData: Gallery = await data.json();
return {
paths: locales
? locales.reduce<string[]>((arr, locale) => {
pathsData.images.forEach(imageId => {
arr.push(`/${locale}/gallery/${imageId.image_id}`);
});
return arr;
}, [])
: pathsData?.images.map(
imageId => `/gallery/${imageId.image_id}`
),
fallback: false
};
}
export async function getStaticProps<P>(
ctx: GetStaticPropsContext
): Promise<
GetStaticPropsResult<
P & {
Header: DynamicNavQuery['Header'];
Footer: DynamicNavQuery['Footer'];
initDataImage: Partial<
Configuration<Gallery, any, Fetcher<Gallery>>
>;
id: string;
}
>
> {
const apolloClient = initializeApollo({
headers: ctx.params ?? {}
});
await apolloClient.query<
DynamicNavQuery,
DynamicNavQueryVariables
>({
notifyOnNetworkStatusChange: true,
fetchPolicy: 'cache-first',
query: DynamicNavDocument,
variables: {
idHead: 'Header',
idTypeHead: WordpressMenuNodeIdTypeEnum.NAME,
idTypeFoot: WordpressMenuNodeIdTypeEnum.NAME,
idFoot: 'Footer'
}
});
const id = ctx?.params ? (ctx.params.id as string) : '21177790';
const initDataGallery = await getBooksyPhotoById(id);
const initDataImage: Gallery = await initDataGallery.json();
return addApolloState(apolloClient, {
props: {
initDataImage,
id
},
revalidate: 600
});
}
export default function GalleryById<
T extends typeof getStaticProps
>({
Header,
Footer,
initDataImage,
id
}: InferGetStaticPropsType<T>) {
const router = useRouter();
const parsedId = router.query
? (router.query.id as string)
: '';
const { data } = useSWR<Gallery>(
`/api/booksy-image-by-id/?category=biz_photo&image_id=${
id ? id : parsedId
}`,
fetcherGallery,
initDataImage
);
const booksyImageLoader = ({
src,
width,
quality
}: ImageLoaderProps) => {
return `${src}?w=${width}&q=${quality || 75}`;
};
const targetThumbnail = data?.images[0].thumbnails['640,0-hr']
.url
? data.images[0].thumbnails['640,0-hr'].url
: data?.images[0].image
? data.images[0].image
: '';
const thumbnailDecoded = decodeURI(targetThumbnail ?? '');
const fragmentThumbnailURI = parseUrl(thumbnailDecoded ?? '');
const thumbnailReconstructed =
`${fragmentThumbnailURI?.baseUrl.concat(
fragmentThumbnailURI.pathname
)}
` ?? '';
return (
<>
{router.isFallback ? (
<Fallback />
) : (
<AppLayout
Header={Header}
Footer={Footer}
title={`${data?.images[0].image_id ?? parsedId}`}
>
<Container
clean
className='my-16 max-w-5xl mx-auto block rounded-xl shadow-cardHover'
>
{data && data.images ? (
<Image
className='rounded-xl object-cover'
src={
thumbnailReconstructed !== ''
? thumbnailReconstructed
: '/doge-404.jpg'
}
loader={booksyImageLoader}
width='1280'
height='1294'
priority
quality={100}
layout='responsive'
/>
) : (
<Fallback />
)}
</Container>
</AppLayout>
)}
</>
);
}
The directory
and there are 48 paths being generated in production builds at the moment