Develop Reference

Multiple items not displaying in my Cart [ReactJS]

am building a small E-commerce site, where I want to display the cart details but when I try to add more than one item to the cart, only one item will displaying in cart page.
How I coded for displaying items in Cart:
I have a (Home Page) HomePage.jsx, where i will display the all the products through API. and i have a Button VIEW DETAILS for earch Items.
clicking on VIEW DETAILS button will navigate to Another jsx component i.e. ProductDetails.jsx, where i will display products details with ADD TO CART button, when we click on that button, it will send a props to Header.jsx component for displaying Cart badge at the top. as well as sending its product ID as a props to Cart.jsx.
When user visit Cart.jsx page, we will fetching its product details based on products ID[send by props prev. step]
Please checkout this samall video:click
There is Nothing problem in HomePage and ProductDetails page, only facing in Cart
Homepage.jsx - Home Page - Displaying all products from API through map()
<div className="row ">
{
items.myItems.map((itm,index)=>(
<div className="col-sm justify-content-between position-relative d-flex flex-column align-items-center text-center">
<img src={itm.image} id={`thummbnail_id${itm.id}`} alt="" height="300" width="300" className="text-center thumbnail" />
<h4>{itm.title}</h4>
<p>Rs.{itm.price}</p>
<li className="btn mb-5 btn-primary"><Link className="text-white" to={`/products-details/${itm.id}`}>VIEW DETAILS</Link></li>
</div>
))
}
</div>
ProductDetails.jsx - Product Details - Displaying particular product details
<div className="row">
{
initData1.products.map((item,index)=>
{
if(getId!=item.id)
{
return <div className="col-sm justify-content-between position-relative d-flex flex-column align-items-center text-center">
<p>{index}</p>
<p>{item.id}</p>
<img src={item.image} id={`thummbnail_id${item.id}`} alt="" height="300" width="300" className="text-center thumbnail" />
<h4>{item.title}</h4>
<p>Rs.{item.price}</p>
<li className="btn mb-5 btn-primary"><Link className="text-white" to={`/products-details/${item.id}`}>VIEW DETAILS</Link></li>
</div>
}
}
)}
</div>
Header.jsx - Header for displaying cart Badge
import {useState,React,useEffect} from 'react'
import {Link} from 'react-router-dom'
import '../../src/head_cont.css'
function Header(props) {
return (
<div className="head_cont">
<div className="container">
<div className="left">
<li className="logo text-light">SHOP69</li>
</div>
<div className="right">
<ul>
<li className="header_links mx-4"><Link className="link" to="/">HOME</Link></li>
<Link to="/"><i class="fas cart_icon cart_icon_resp pt-4 text-white fa-2x fa-home"></i></Link>
{/* <li className="header_links mx-4"><a className="link" href="#container_id">PRODUCTS</a></li> */}
<li className="header_links mx-4"><Link className="link" to="/cart-details">VISIT STORE</Link></li>
<Link to="/cart-details"><i className=" cart_icon pt-4 fa-2x fas text-light fa-shopping-bag"></i>{props.text>=1 ? <span className="badge" id="badge">{props.text}</span> : ""}</Link>
</ul>
</div>
</div>
</div>
)
}
export default Header
CartDeails.jsx - Cart Page
import React from 'react'
import { useState, useEffect } from 'react'
import '../../src/cart-details.css'
function CartDetails(props) {
const[cart,setCart]=useState([])
useEffect(() => {
try
{
let id=props.id
fetch(`https://fakestoreapi.com/products/${id}`).then(function(res){
return res.json();
}).then(function(data){
console.log(data)
setCart([...cart,data])
})
}
catch(err)
{
console.log("Something went wrong while fetching Cart items")
}
}, [])
if(props.val>=1)
{
return (
<div>
{cart.map((item,index)=>(
<div className="cart_cont text-dark">
<div className="innerDiv row m-auto mt-4 d-flex shadow-lg container">
<div className="d-flex justify-content-around align-items-center flex-column col-sm d-flex id">
<label htmlFor="id" className="text-danger fw-bold m-auto">ID</label>
<p className="m-auto" id="id">{item.id}</p>
</div>
<div className="d-flex col-sm thumbnail">
<img src={item.image} className="mt-1 mb-1" alt="image" height="100px" width="80px"/>
</div>
<div className="d-flex align-items-center flex-column col-sm quantity">
<label htmlFor="title" className="text-danger fw-bold m-auto">Title</label>
<p className="m-auto" id="title">{item.title}</p>
</div>
<div className="d-flex align-items-center col-sm flex-column unitPrice">
<label htmlFor="unitprice" className="text-danger fw-bold m-auto">Unit Price</label>
<p className="m-auto unitprice" id="unitprice">Rs. {item.price}</p>
</div>
<div className="d-flex align-items-center flex-column col-sm total">
<label htmlFor="total" className="text-danger fw-bold m-auto">Total</label>
<p className="m-auto total" id="total">N/A</p>
</div>
<div className="d-flex align-items-center col-sm rmBtn">
<i class="far fa-2x m-auto fa-trash-alt"></i>
</div>
</div>
</div>
))
}
</div>
)
}
else
{
return (
<div className="no_items">
<div className="no_items_bg text-center">
<h2 className="display-5 fw-bold">Cart is Empty</h2>
<i class="fas fa-5x fa-cat"></i>
</div>
</div>
)
}
}
export default CartDetails
As am familiar with React Functional Component and whole code is given here.
Please help me.
Thanks in advance.

Bootstrap 4 collapse not working with map in ReactJS

I am trying to add collapse to a project where it will display all the available content when Read More button (which is working for collapsing button) got clicked. But, it only collapsing for the first item that fetched from the database, and for every other Read More button click it is not working for that particular item rather it keeps opening and closing the first item. Below is my code that I am trying with. I need help with this issue. Thanks very much.
<div>
<div className="container mt-3">
<h1 className="text-justify mb-4">The Blogstar Blog</h1>
<div>
{data && data.length > 0 ? (
data.map((item, index) => {
return (
<div className="card p-3 mt-3" key={index}>
<div className="d-flex">
<div className="text-justify mr-5">
<h3>{item.title}</h3>
</div>
<div className="d-flex ml-auto ">
<p className="mt-2 mr-2">
<img
src="https://img.icons8.com/material-rounded/18/000000/facebook-like.png"
alt="facebook-like-icon"
/>{' '}
{item.upvotes}
</p>
<p className="mt-2 mr-2">
<img
src="https://img.icons8.com/material-rounded/18/000000/thumbs-down.png"
alt="thumbs-down-icon"
/>{' '}
{item.downvotes}
</p>
<p className="mt-2">
<img
src="https://img.icons8.com/ios-filled/18/000000/comments.png"
alt="comments-icon"
/>{' '}
{item.comments}
</p>
</div>
</div>
<div className="d-flex">
<p>
<img
src="https://img.icons8.com/ios-glyphs/18/000000/clock.png"
alt="clock-icon"
/>
{formatDate(item.createdAt)}{' '}
</p>
<p>
<img
className="ml-2"
src="https://img.icons8.com/material-rounded/18/000000/writer-male.png"
alt="author-icon"
/>{' '}
<strong>{item.author.name}</strong>
</p>
</div>
<div className="text-justify">
{ReactHtmlParser(item.content.substring(0, 150))}
<button
class="btn btn-primary"
type="button"
data-toggle="collapse"
data-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample">
Read More
</button>
<div class="collapse" id="collapseExample">
{ReactHtmlParser(item.content)}
</div>
</div>
</div>
);
})
) : (
<div>Nothing in database</div>
)}
</div>
</div>
</div>

Change the data-target on your collapse button to this:
data-target={`#collapseExample${index}`}
and your collapse div to this:
<div class="collapse" id={`collapseExample${index}`}>
// ... content
</div>
The problem was that your collapse id and button data-target were static. These values need to be dynamic depending on the data you're mapping through. Otherwise your button will always target the same element. This explains why every button collapses/expands the same div.

Uncaught TypeError: Cannot read property 'renderRows' of undefined

I am in the process of switching a component class to a function in my website so I can use hooks to interact with my backend, but after switching to the arrow function i am now getting the error above. What exactly changed to cause this error, I know i had to delete the render{} but is that what is causing it? Here is my current code where the error is located.
import React, { Component, useEffect, useState } from "react";
import ReactDOM from 'react-dom';
import { Link } from "react-router-dom";
import "./HomePageBody.scss";
import products from "../../../../back-end/products";
const HomePageBody = () => {
const getProducts = async() => {
try {
const response = await fetch("http://localhost:5000/carts");
const jsonData = await response.json();
console.log(jsonData);
} catch (err) {
console.error(err.message);
}
}
useEffect(() => {
getProducts();
});
let renderRows = () => {
let finalArr = [];
products.forEach((product) => {
finalArr.push(
<div className="col-md-6 col-lg-4 mt-4 colCard w-75">
<Link
to={{
pathname: "/ProductPage/" + product.name,
state: { sentproduct: product },
}}
>
<div className="card w-100 h-100">
<div className="card-img-wrap w-100 h-100">
<img
className=" card-img-top"
src={product.img}
alt="Card image cap"
/>
</div>
<div className="card-body">
<h6 className="card-title text-center">{product.name}</h6>
<p className="card-text text-center">
<small className="text-muted red">${product.price}</small>
</p>
</div>
</div>
</Link>
</div>
);
});
return finalArr;
}
return (
<div className="largebody ">
<div
id="carouselAd"
className="carousel slide carousel-custom"
data-ride="carousel"
>
<div className="carousel-inner">
<div className="carousel-item active">
<a href="#">
<img
className=""
src="https://res.cloudinary.com/ndc-images/image/upload/f_auto,fl_force_strip.preserve_transparency.progressive.sanitize,q_auto:best/media//blog/buy-affordable-high-quality-clothes-that-last-from-sustainable-brands.jpg"
alt="First slide"
/>
</a>
</div>
<div className="carousel-item">
<a href="#">
<img
className=""
src="https://res.cloudinary.com/ndc-images/image/upload/f_auto,fl_force_strip.preserve_transparency.progressive.sanitize,q_auto:best/media//blog/buy-affordable-high-quality-clothes-that-last-from-sustainable-brands.jpg"
alt="Second slide"
/>
</a>
</div>
<div className="carousel-item">
<a href="#">
<img
className=""
src="https://res.cloudinary.com/ndc-images/image/upload/f_auto,fl_force_strip.preserve_transparency.progressive.sanitize,q_auto:best/media//blog/buy-affordable-high-quality-clothes-that-last-from-sustainable-brands.jpg"
alt="Third slide"
/>
</a>
</div>
<div className="carsouselControls">
<a
className="carousel-control-prev"
href="#carouselAd"
role="button"
data-slide="prev"
>
<span
className="carousel-control-prev-icon"
aria-hidden="true"
></span>
<span className="sr-only">Previous</span>
</a>
<a
className="carousel-control-next"
href="#carouselAd"
role="button"
data-slide="next"
>
<span
className="carousel-control-next-icon color.red"
aria-hidden="true"
></span>
<span className="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div className="col-lg-9 col-sm-12 m-auto">
<h1 className="text-center mt-5 mb-3 ml-auto mr-auto headerFont">
"Equality is the soul of liberty; there is, in fact, no liberty
without it." - Frances Wright
</h1>
<p className="paragraphFont">
We at EqualityFits believe that all people should be treated equaly
and fairly regarldess of race, religion, and sexuality. We support
groups such as Black Lives Matter and LBGTQ. Every one of our
products donates to an underlying organization that has to do with
that specific product. We believe that helping theses organizations
is a first step in total equality throughout society.
</p>
</div>
<div className="container cardbuttons text-center mb-5 mt-5">
<div className="row mt-5 inline-block">
<div className="col-lg-4 ml-auto">
<Link
to={{
pathname: "/Collections/" + "LGBT",
key: Math.random,
state: { sentinfo: "LGBT" },
}}
>
<div className="card">
<div className="card-img-wrap">
<img
className="card-img-top ml-auto mt-2 img"
src="http://equalityfits.com/img/menstshirt.png"
alt="Card image cap"
/>
</div>
</div>
</Link>
</div>
<div className="col-lg-4 ">
<Link
to={{
pathname: "/Collections/" + "LGBT",
key: Math.random,
state: { sentinfo: "LGBT", name: false, cat: true },
}}
>
<div className="card position-relative">
<div className="card-img-wrap right">
<img
className="card-img-top ml-auto mt-2 img"
src="http://equalityfits.com/img/menstshirt.png"
alt="Card image cap"
></img>
</div>
</div>
</Link>
</div>
<div className="col-lg-4 mr-auto">
<Link
to={{
pathname: "/Collections/" + "LGBT",
key: Math.random,
state: { sentinfo: "LGBT", name: false, cat: true },
}}
>
<div className="card">
<div className="card-img-wrap">
<img
className="card-img-top mr-auto mt-2 img"
src="http://equalityfits.com/img/womenstshirt.png"
alt="Card image cap"
/>
</div>
</div>
</Link>
</div>
</div>
</div>
<div className="row ml-auto mr-auto mt-5 w-75">
<div className="col-lg-9 col-sm-12 m-auto p-0 mt-5">
<h1
className="text-center font-weight-bold mt-5"
style={{ marginLeft: "9px" }}
>
Best Selling
</h1>
<hr style={{ borderTop: "3px solid rgba(0, 0, 0, 0.1)" }}></hr>
<div className="row justify-content-center">
**{this.renderRows()}** <-----------------Where i call upon the function
</div>
</div>
</div>
</div>
);
}
export default HomePageBody;
I call upon the function at the bottom, i put arrows next to it to make it easier.

You are no longer in a class, so the this context no longer makes sense. Just change it to renderRows().

renderRows is no longer a method on you class, but rather a function in your component. Therefore instead of this.renderRows(), you call it using renderRows().

How can I call a function inside of a .map of arrays?

I am passing down a function through props that capitalizes a few items being mapped over. I am getting an error on the item portion of item.creator.I am just wondering why I am recieving the error and not able to just call the function inside of the map. Thanks for your help.
Error message is Line Parsing error: Unexpected token, expected ",".
PARENT COMPONENT
export default function MainContent() {
const techContent = useSelector(displayTechContent);
const designContent = useSelector(displayDesignContent);
const makeCapital = (words) => words.replace(/^\w/, (c) => c.toUpperCase());
return (
<div className="container">
<div className="topics-list">
<div className="topic-row mb-5">
<h2 className="topic-heading mb-4">Software Development</h2>
<ContentCard data={techContent} capitalize={makeCapital} />
</div>
CHILD COMPONENT
export default (props) => (
<div>
<div className="resource-list">
{props.data.map((item) => (
<a key={item.id} href={item.link} className="resource-card-link mr-3">
<div className="card resource-card mb-2">
<div className="card-header">
<h4 className="resource-title">{item.title}</h4>
<span className="resource-creator">by: ***{props.capitalize({item.creator})}***.</span> <--this function
</div>
<div className="card-body py-3">
<div className="resource-description mb-2">
{item.description}
</div>
<div className="resource-type mb-2">
<i className="fas fa-book"></i> {item.type}
</div>

The curly braces around of item.creator are redundant.
export default (props) => (
<div>
<div className="resource-list">
{props.data.map((item) => (
<a key={item.id} href={item.link} className="resource-card-link mr-3">
<div className="card resource-card mb-2">
<div className="card-header">
<h4 className="resource-title">{item.title}</h4>
<span className="resource-creator">by: ***{props.capitalize(item.creator)}***.</span> <--this function
</div>
<div className="card-body py-3">
<div className="resource-description mb-2">
{item.description}
</div>
<div className="resource-type mb-2">
<i className="fas fa-book"></i> {item.type}
</div>

How can I get a dynamic value of href and id's of the card in React JS

This is my first question in stackoverflow, I am still learning how to code and it might be a newbie question.
But, is it possible to have a dynamic href and id values when I want to map my data with axios to become cards? Because if I run my code, the card that will work (one that can collapse) is just the first one, the others did not work. This is my code (sorry the code isnt the same with the real file in my vscode cos my real file was becoming a chaos.)
render() {
const mobillist = this.state.dataku.map((item, index) => {
return (
<div className="container-fluid" style={{ marginTop: "100px" }}>
<div id="accordion">
<div className="card">
<div className="card-header">
<a className="card-link" data-toggle="collapse" href="#colla">
{item.model} - {item.tahun}
</a>
</div>
<div id="colla" className="collapse show" data-parent="#accordion">
<div className="card-body">
<div className="row">
<div className="col">
<h4> ini menu 1 </h4>
</div>
<div className="col">
<center> <h4> ini menu 2 </h4></center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
return (
<div>
{mobillist}
</div>

You can use unique ID for every href using index value in the map and also map the index in accordion div. See the below code for sample
render() {
const mobillist = this.state.dataku.map((item, index) => {
return (
<div className="container-fluid" style={{ marginTop: "100px" }}>
<div id="accordion">
<div className="card">
<div className="card-header">
<a className="card-link" data-toggle="collapse" href={"#colla"+ index}>
{item.model} - {item.tahun}
</a>
</div>
<div id={"colla"+ index} className="collapse show" data-parent="#accordion">
<div className="card-body">
<div className="row">
<div className="col">
<h4> ini menu 1 </h4>
</div>
<div className="col">
<center> <h4> ini menu 2 </h4></center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
return (
<div>
{mobillist}
</div>