Develop Reference

I keep getting 'Cannot destructure property 'title' of 'product' as it is undefined.' in React

I am working on a react project and trying to show more details on a product with react-router useParams, but I keep getting the error 'Cannot destructure property 'title' of 'product' as it is undefined.
Here's the code for the single products
import React from "react";
import products from "../data2";
import { Link, useParams } from "react-router-dom";
const SingleProducts = () => {
const { productId } = useParams();
const product = products.find((productg) => productg.id === productId);
const { title } = product;
return (
<section className="section product">
<img />
<h3>{title}</h3>
<h3></h3>
<Link to="/products">Back home</Link>
</section>
);
};
export default SingleProducts;
and here's for the product items
import React from 'react'
import { products } from '../data2'
import style from '../Styles/ProductItem.module.scss'
import StarRateIcon from '#mui/icons-material/StarRate';
import {Link} from "react-router-dom"
const ProductItem = () => {
return (
<div className={style.container}>
{products.map((item)=>{
return (
<article key={item.id} className={style.product}>
<h1>{item.title}</h1>
<h1>{item.id}</h1>
<div>
<img src={item.images} />
</div>
<div>
<p>{item.title}</p>
<h4>${item.price}</h4>
<p>{item.stock} items left</p>
<div className={style.rating}>
<p>{item.rating}</p>
<StarRateIcon className={style.star}/>
</div>
</div>
<Link to={`/products/${item.id}`}><button className={style.btn}>View more</button></Link>
<div className={style.discount}>
<p>- {item.discountPercentage} %</p>
</div>
</article>);
})}
</div>
)
}
export default ProductItem

Array.prototype.find potentially returns undefined if no match is found. The component logic should handle this case and only attempt to access into defined objects. Add a check on the returned product value and conditionally render alternative UI.
You should also be aware that the route path params will always be a string type, so you'll want to ensure you are using a type-safe comparison in the find predicate function. Converting the value you are comparing against the path param to a string is sufficient.
Example:
const SingleProducts = () => {
const { productId } = useParams();
const product = products.find((productg) => String(productg.id) === productId);
if (!product) {
return "No matching product found.";
}
const { title } = product;
return (
<section className="section product">
<img />
<h3>{title}</h3>
<h3></h3>
<Link to="/products">Back home</Link>
</section>
);
};

React: implementing a router

I tried implementing browser router, but to no success. i'm having trouble with useParams hook, and just the router in general. Looked through multiple posts and i just wasn't able to get it working. I'll post the most barebones code below, hoping someone knows the solution. I removed the traces of the router, since it didn't work.
App.js is currently empty:
const App=()=> {
return (
<Main/>
);
}
Main.jsx is my main element, where components change. There isn't a page change per se, everything is in the main element. values get passed through props into main and written into state, so the useEffect can change visibility of components based on what you chose, first category, then recipe.:
const Main =()=> {
const [showElement, setShowElement] = useState("category");
const [selectedCategory, setSelectedCategory] = useState();
const [selectedRecipe, setSelectedRecipe] = useState();
useEffect(()=> {
if (selectedRecipe) {
setShowElement("recipe")
} else if (selectedCategory) {
setShowElement("recipeSelection")
}
window.scrollTo(0, 0)
}, [selectedCategory][selectedRecipe]);
return (
<>
<Header />
<main className="main">
<div>
<div>
{showElement === "category" &&
<CategoryWindow
passSelectedCategory={setSelectedCategory}
/>
}
</div>
<div>
{showElement === "recipeSelection" &&
<RecipeSelection
value={selectedCategory}
passSelectedRecipe={setSelectedRecipe}
/>
}
</div>
<div>
{showElement === "recipe" &&
<RecipeWindow
value={selectedRecipe}
/>
}
</div>
</div>
</main>
</>
)
}
This is the recipe picker component. For example when i click on curry, i'd like the url to show /food/curry. None od the names are hardcoded, everything comes from a javascript object:
const RecipeSelection =(props)=> {
const recipies = Recipies.filter(x=>x.type === props.value);
return (
<div className="selection-div">
<div className="selection-inner">
{recipies.map(selection =>
<>
<img src={require(`../images/${selection.id}.png`)}
className="selection-single"
key={selection.id}
alt={"picture of " + selection.id}
onClick={()=> props.passSelectedRecipe(selection.id)}
>
</img>
<div className="container-h3"
onClick={()=> props.passSelectedRecipe(selection.id)}
>
<h3 className="selection-h3">{selection.name}</h3>
</div>
</>
)}
</div>
</div>
)
}

Next.js getStaticProps not refreshing the data [duplicate]

This question already has an answer here:
How to add new pages without rebuilding an app with +150k static pages?
(1 answer)
Closed 11 months ago.
I've jus started working and learning Next so I have a lot of confusions,
I was using the useEffect on react and it always updated the UI with the new stuff that was added to the API however, its not working on next.js
SO I have an index file
import Link from "next/link";
import react, {useState, useEffect} from "react";
import { useRouter } from 'next/router';
export async function getStaticProps({ res }) {
try {
const result = await fetch(`https://api.pandascore.co/matches/running??sort=&page=1&per_page=10&&token=#`);
const data = await result.json();
return {
props: { game: data },
revalidate: 10 // 10 seconds
};
} catch (error) {
res.statusCode = 404;
return { props: {} };
}
}
const upcomingGames = ({ game }) => {
return (
<div className="container">
<h2>Live Games - </h2>
<div className="columns is-multiline">
{game.map(q => (
<div className="column is-half" key={q.id}>
<div className="inner">
<div className="inner__box">
<Link href = {'/live/' + q.slug} key={q.slug}>
<a className="h2link" key={q.slug}> {q.name}</a>
</Link></div>
</div>
</div>
))}
</div>
</div>
);
}
export default upcomingGames;
This file is connected to a [slug].js file which displays more details about a game,
Now in production when I deployed the app to vercel I have noticed that when a new game is added to the API it displays in the index.js but when I click on it I'm redirected to a fallback(404) page.
After I redeploy my project this is fixed, however every time a new game is added and rendered I'm unable to access its individual page which I defined in [slug].js
export const getStaticPaths = async () => {
const res = await fetch(`https://api.pandascore.co/matches/running?sort=&page=1&per_page=50&token=#`);
const data = await res.json();
const paths = data.map(o => {
return {
params: { slug: o.slug.toString() }
}
})
return {
paths,
fallback: false
}
}
export const getStaticProps = async (context) => {
const slug = context.params.slug;
const res = await fetch(`https://api.pandascore.co/matches/running?search[slug]=${slug}&token=#`);
const data = await res.json();
console.log(data)
return {
props: {
game: data
}
}
}
export default function live({ game }) {
return (
<div className="container">
<h2> Single Game deets.</h2>
{game.map((g) => (
<div className="container" key={g.id} >
<div className="inner-box" key={g.slug}>
{/** Fetch team and display their corresponding score - A bit of code repition :( */}
<div className="score-board-min columns is-mobile is-multiline">
<div className="column is-full"> {g.opponents.slice(0, -1).map((o) => <span className="team" key={o.id}>{o.opponent.name}</span>)}
{g.results.slice(0, -1).map((res, i) => (
<span className="scores" key={i}>{res.score}</span>
))}</div>
<div className="column">
{g.opponents.slice(-1).map((o) => <span className="team" key={o.id}>{o.opponent.name}</span>)}
{g.results.slice(-1).map((res, i) => (
<span className="scores" key={i}><div>{res.score}</div></span>
))}
</div>
</div>
<br />
<div className="lower-box columns is-multine">
<div className="column is-half">
<div className="dark"><span className="is-pulled-left">League</span> <span className="is-pulled-right">{g.league && g.league.name}</span></div>
<div className="dark"><span className="is-pulled-left">Game:</span> <span className="is-pulled-right"> {g.videogame && g.videogame.name} </span></div>
<div className="dark alt"><span className="is-pulled-left">Tournament</span> <span className="is-pulled-right"> {g.tournament && g.tournament.name} | </span></div>
<div className="dark"><span className="is-pulled-left">Series</span> <span className="is-pulled-right"> {g.serie.full_name} | {g.serie.tier.toUpperCase()} </span></div>
<div className="dark alt"><span className="is-pulled-left">Teams</span> <span className="is-pulled-right"> {g.opponents.map((o) => o.opponent.name).join(" vs ")} </span></div>
</div>
</div>
<br />
</div>
</div>
))}
</div>
)
}

During development (next dev) getStaticPaths gets called on every request, but for production it only gets called the next time you run next build. So when a new game is added to the API, the paths named after ${some_new_game_slug} won't exist until you run next build again, i.e., re-deploy. If this type of data changes frequently, you might have to use getServerSideProps for [slug].js as well (so no static paths) or opt for the client-side data fetching approach.

How to make a component in React JS to have it's on values and functionalities separately from the same component in a page

I'm kinda new to react js, I would be grateful if someone could help me out.
The idea is to have some items (foods) as components and add them to your shopping list and eventually post the final purchase bag to the server.
I have made a component to use as my item card and created a function to add and increase the amount of that item. but when I try to work with the component it affects all the other components.
this is the result of my output. When I add and increase food in a component the other components' amounts continue from the one I added last.
how can I separate the functionally of the same components on a page?
here is the code that I wrote:
import React, { useState } from "react";
var Amount = 0;
function FoodItem(props) {
const [mainDivActivated, mainDivSetStyle] = useState("FoodItemMainContainer");
const [descriptionDivActivated, descriptionSetStyle] =useState("FoodDescription");
const [addButtonDivDisplay, addButtonSetStyle] = useState("PositionReletive");
const [trashButtonDivDisplay, trashButtonSetStyle] = useState("PositionReletive DisplayNone");
const [amountNumber, setAmountNumber] = useState();
var activate = 0;
function OnclickAddToAmount() {
Amount++;
setAmountNumber(Amount);
}
function OnclickRemoveFromAmount() {
Amount--;
setAmountNumber(Amount);
}
function OnclickActivateEvent() {
activateItem();
OnclickAddToAmount();
}
function activateItem() {
mainDivSetStyle("FoodItemMainContainer PrimaryBackgroundGradientColor");
descriptionSetStyle("FoodDescriptionActivated");
addButtonSetStyle("PositionReletive DisplayNone");
trashButtonSetStyle("PositionReletive");
}
function OnclickDeactivateEvent() {
deactivateItem();
OnclickRemoveFromAmount();
}
function deactivateItem() {
mainDivSetStyle("FoodItemMainContainer");
descriptionSetStyle("FoodDescription");
addButtonSetStyle("PositionReletive");
trashButtonSetStyle("PositionReletive DisplayNone");
}
return (
<div className={mainDivActivated}>
<div className="FoodItemContainer">
<div>
<div className="FontSizeXL">{props.foodName}</div>
<div className={descriptionDivActivated}>{props.foodDescription}</div>
</div>
<div className="PositionReletive">
<img
className="VerticallyAndHorizontallyCentered FoodMenuImageCss"
src="/images/temptestpictures/foodImage.jpg"
alt=""
/>
</div>
<div className="PositionReletive FoodItemPriceCss">
<div className="FontSizeXL">Price : {props.foodPrice}</div>
</div>
<div className={addButtonDivDisplay}>
<div
onClick={() => OnclickActivateEvent()}
className="FontSizeXL PrimaryBackgroundGradientColor ColorWhite VerticallyAndHorizontallyCentered WidthFull HorizontallyCenteredText FoodItemAddBtn"
>
Add
</div>
</div>
<div className={trashButtonDivDisplay}>
<div className="VerticallyAndHorizontallyCentered WidthFull HorizontallyCenteredText FoodItemAddBtn">
<div className="AddOrRemoveFoodIconContainer">
{Amount<2 ? (
<span onClick={() => OnclickDeactivateEvent()}className="icon-trashcan AddOrRemoveFoodIcon"></span>
) : (
<span onClick={() => OnclickRemoveFromAmount()}className="icon-minus AddOrRemoveFoodIcon"></span>
)}
<div className="FontSizeXL AddOrremoveNumber">{Amount}</div>
<span onClick={() => OnclickAddToAmount()}className="icon-plus AddOrRemoveFoodIcon"></span>
</div>
</div>
</div>
</div>
</div>
);
}
export default FoodItem;

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.