Develop Reference

The carousel is not working and getting $('carouselId').carousel is not a function error

I am creating a nextJS app and I am creating a carousel component and trying to use it in index.js
Below is the code of my component and I am using the code that's used at https://www.codeply.com/go/EIOtI7nkP8/bootstrap-carousel-with-multiple-cards.
import React, { useState, useEffect } from 'react';
import $ from 'jquery';
import { Container, Row, Card, Pagination } from 'react-bootstrap';
import Carousel from 'react-bootstrap/Carousel';
import styles from './NewsAndEvents.module.css';
const NewsAndEventsComponent = () => {
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
useEffect(() => {
console.log('Fired', $('#recipeCarousel'));
$('#recipeCarousel').carousel({
interval: 5000,
});
$('#recipeCarousel.carousel .carousel-item').each(function () {
var minPerSlide = 3;
var next = $(this).next();
console.log(next);
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < minPerSlide; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
return (
<div className={styles.mainDiv}>
<Container>
<Row className={styles.newEventsHeaderContainer}>
<p className={styles.mainText}>News and Events</p>
<Pagination className={styles.mainText}>
<Pagination.Prev className={styles.paginationButton} />
<Pagination.Next className={styles.paginationButton} />
</Pagination>
</Row>
<div className="container text-center my-3">
<div className="row mx-auto my-auto">
<div
id="recipeCarousel"
className="carousel slide w-100"
data-ride="carousel"
>
<div className="carousel-inner w-100" role="listbox">
<div className="carousel-item">
<div className="col-md-4">
<div className="card card-body">
<img
className="img-fluid"
src="http://placehold.it/380?text=1"
/>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-4">
<div className="card card-body">
<img
className="img-fluid"
src="http://placehold.it/380?text=2"
/>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-4">
<div className="card card-body">
<img
className="img-fluid"
src="http://placehold.it/380?text=3"
/>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-4">
<div className="card card-body">
<img
className="img-fluid"
src="http://placehold.it/380?text=4"
/>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-md-4">
<div className="card card-body">
<img
className="img-fluid"
src="http://placehold.it/380?text=5"
/>
</div>
</div>
</div>
<div className="carousel-item active">
<div className="col-md-4">
<div className="card card-body">
<img
className="img-fluid"
src="http://placehold.it/380?text=6"
/>
</div>
</div>
</div>
</div>
<a
className="carousel-control-prev w-auto"
href="#recipeCarousel"
role="button"
data-slide="prev"
>
<span
className="carousel-control-prev-icon bg-dark border border-dark rounded-circle"
aria-hidden="true"
></span>
<span className="sr-only">Previous</span>
</a>
<a
className="carousel-control-next w-auto"
href="#recipeCarousel"
role="button"
data-slide="next"
>
<span
className="carousel-control-next-icon bg-dark border border-dark rounded-circle"
aria-hidden="true"
></span>
<span className="sr-only">Next</span>
</a>
</div>
</div>
</div>
</Container>
</div>
);
};
export default NewsAndEventsComponent;
I am getting the below error while trying to execute the $('#recipeCarousel').carousel({interval: 5000,}); inside useEffect.
Does anyone have any idea what i might be missing or maybe doing incorrectly? Please advise
Ps- Have imported below line in the _app.js file as well.
import 'bootstrap/dist/css/bootstrap.min.css';

When I try to Increase the quantity of one item, other items in the Cart quantity will also increased

am trying to build an e-commerce site, but in cart page am get confused about the logic implementation of quantity increment. Assume I have more that 1 Items in the cart and When I try to Increase the quantity of one item, other items in the Cart will also increased.
am using localstorage to store the cart details, when user click on ADD TO CART button.
Please Help me!
CODE: cartDetails.jsx
import React from 'react'
import { useState, useEffect } from 'react'
import '../../src/cart-details.css'
import Tooltip from '#material-ui/core/Tooltip';
import Button from '#material-ui/core/Button';
function CartDetails(props) {
let ele1;
let {cno}=props;
const[ele, setEle]=useState('');
let[qty, setQty]=useState(1)
// let [totalPrice.setTotalPrice]=useState()
let[data,setData]=useState([])
const incrementQty = (index) =>{
setQty(qty++)
console.log(index)
}
const decrementQty = (index) =>{
setQty(qty--)
console.log(index)
}
{data.map((item,index)=>(
<div className="cart_cont desktop text-dark" key={index}>
<div className="innerDiv row m-auto mt-4 d-flex shadow-lg container">
{/* <div className="split1"> */}
<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 col-sm flex-column unitPrice">
<label htmlFor="unitprice" className="text-danger fw-bold m-auto">Quantity</label>
<div className="btns_mob m-auto d-flex flex-row mx-4">
<button className="btn btn-outline-primary mx-1" onClick={()=>decrementQty(index)}>-</button>
<button className="btn disabled btn-dark mx-1">{qty}</button>
<button className="btn btn-outline-primary mx-1" onClick={()=>incrementQty(index)}>+</button>
</div>
</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">
<Tooltip title="Delete item">
<i className="far fa-2x m-auto fa-trash-alt" id={index} onClick={(btn)=>{
btn.preventDefault();
console.log('index'+index)
let arr= JSON.parse(localStorage.getItem('cartDetails'))
if(JSON.parse(localStorage.getItem('cartDetails')).length>1)
{
ele1 = arr.splice(index-1,1)
}
else
{
ele1 = arr.splice(index+1,1)
}
console.log(ele1)
// arr.splice(btn.target.id,1)
localStorage.setItem('cartDetails',JSON.stringify(ele1))
cno(JSON.parse(localStorage.getItem('cartDetails')).length)
// setEle(ele1)
}}></i></Tooltip>
</div>
</div>
</div>
))
}
Please help me

Because you increase and decrease the state which is not a good practice. And if you want to increase or decrease the only product quantity, then it will be ok. But you can not inc/dec in the cart like that. You have to create two new states for cart items and total quantities. Then you can increase or decrease your cart items and items quantities using these states:
const [cartItem, setCartItem] = useState([]);
const [totalQuantities, setTotalQuantities] = useState(0);
const toggleCartItemQuantity = (id, value) => {
foundProduct = cartItem.find((item) => item.id === id);
index = cartItem.findIndex((product) => product.id === id);
const newCartItems = cartItem.filter((item) => item.id !== id);
if (value == 'increase') {
setCartItem([
...newCartItems,
{ ...foundProduct, quantity: foundProduct.quantity + 1 },
]);
setTotalQuantities((prevTotalQuantities) => prevTotalQuantities + 1);
} else if (value == 'decrease') {
if (foundProduct.quantity > 1) {
setCartItem([
...newCartItems,
{ ...foundProduct, quantity: foundProduct.quantity - 1 },
]);
setTotalQuantities((prevTotalQuantities) => prevTotalQuantities - 1);
}
}
};

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 to import the component in another component which include image in react js

I am working on some assignment of reactjs. There are many components are included .
I want to import one component into another components which include different images with it . How can I do it.
Here is the(portfolio items) component which export and include image source
PortItems.js
import React from "react";
const PortItems = () => {
return(
<div>
{/* Portfolio Item 1*/}
<div className="col-md-6 col-lg-4 mb-5">
<div className="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal1">
<div className="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div className="portfolio-item-caption-content text-center text-white"><i className="fas fa-plus fa-3x"></i>
</div>
</div>
<img className="img-fluid" src="" alt="this is cabin image" />
</div>
</div>
</div>
)
}
export default PortItems;
Here is the code for main component which import PortItems
import React ,{Component} from "react";
import "../App.css";
import PortItems from "./PortItems";
import Cabin from "./images/cabin.png";
import Cake from "./images/cake.png";
import Circus from "./images/circus.png";
import Game from "./images/game.png";
import Safe from "./images/safe.png";
import Submarine from "./images/submarine.png";
const Portfollio = () =>{
return(
<div>
{/* Portfolio Section*/}
<section className="page-section portfolio" id="portfolio">
<div className="container">
{/* Portfolio Section Heading*/}
<h2 className="page-section-heading text-center text-uppercase text-secondary mb-0">Portfolio</h2>
{/* Icon Divider*/}
<div className="divider-custom">
<div className="divider-custom-line"></div>
<div className="divider-custom-icon"><i className="fas fa-star"></i></div>
<div className="divider-custom-line"></div>
</div>
{/* Portfolio Grid Items*/}
<div className="row">
* <PortItems
src={Cabin}
/>
*

Try adding props to the PortItem component and use it in its <img />tag:
const PortItems = (props) => {
return(
<div>
{/* Portfolio Item 1*/}
<div className="col-md-6 col-lg-4 mb-5">
<div className="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal1">
<div className="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div className="portfolio-item-caption-content text-center text-white"><i className="fas fa-plus fa-3x"></i>
</div>
</div>
<img className="img-fluid" src={ props.src } alt="this is cabin image" />
</div>
</div>
</div>
)
}

Sorting an array of objects in ReactJS from an API endpoint

In short: I am working on a Bicycle collection app, where I pull an Array of objects from my endpoint to display on a page. I now want to add the functionality of sorting/filtering the bicycles based on year, brand and size when the user selects a field in the dropdown menu. How do I accomplish that inside by component in react?
Similar to this in the browser: /category?year=2000&size=XL&brand=cervelo, I want to do that from my component when a field in the dropdown is selected.
This is my component:
import React, { Component } from 'react'
import actions from '../../actions'
import { Link } from 'react-router'
import { connect } from 'react-redux'
class Category extends Component {
constructor(){
super()
this.state = {
}
}
componentDidMount(){
this.props.getAllBikes()
}
render(){
return(
<div>
<div className="col-xs-12 col-md-2" style={{paddingTop: 0, paddingRight: '70px', left: '5.5%', top: '-4px'}}>
<aside>
<ul className="nav-coupon-category panel">
<li className="all-cat">
<a className="font-14" href="#">Kategorier:</a>
</li>
<li><i className="fa fa-angle-double-right"></i>Tri Cykler
</li>
<li><i className="fa fa-angle-double-right"></i>Racercykler
</li>
<li><i className="fa fa-angle-double-right"></i>Mountainbikes
</li>
<li><i className="fa fa-angle-double-right"></i>Bane Cykler
</li>
<li><i className="fa fa-angle-double-right"></i>Cross Cykler
</li>
<li><i className="fa fa-angle-double-right"></i>Hverdags Cykler
</li>
<li><i className="fa fa-angle-double-right"></i>Vinter Racercykler
</li>
</ul>
</aside>
</div>
<main id="mainContent" className="main-content">
<div className="page-container ptb-60">
<div className="container">
<div className="contact-area contact-area-v1 panel">
<div className="row row-tb-20">
<div style={{paddingBottom: 0}} className="col-xs-12">
<div className="filter-search">
<div className="row">
<div style={{right: '-30px'}} className="col-6 col-md-3 filter-height">
<div className="right-10 pos-tb-center">
<select style={{width: '232%'}} className="form-control input-sm">
<option>Mærke/Brand</option>
<option>Giant</option>
<option>Trek</option>
<option>Specialized</option>
<option>S-Works</option>
<option>Cannondale</option>
<option>Cervelo</option>
<option>Scott</option>
<option>Bianchi</option>
<option>Canyon</option>
<option>Cube</option>
<option>Pinarello</option>
<option>Fuji</option>
<option>Colnago</option>
<option>Felt</option>
<option>Wilier</option>
<option>BH</option>
</select>
</div>
</div>
<div style={{right: '-13px'}} className="col-6 col-md-3 filter-height">
<div className="right-10 pos-tb-center">
<select style={{width: '324%'}} className="form-control input-sm">
<option>Størrelse</option>
<option>50</option>
<option>52</option>
<option>54</option>
<option>56</option>
<option>58</option>
<option>60</option>
<option>62</option>
</select>
</div>
</div>
<div className="col-6 col-md-3 filter-height">
<div style={{right: '13px'}} className="col-6 col-md-3 filter-height">
<div className="right-10 pos-tb-center">
<select style={{width: '490%'}} className="form-control input-sm">
<option>Årgang</option>
<option>Før</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
</select>
</div>
</div>
</div>
<div className="col-6 col-md-3 filter-height">
<div style={{right: '31px'}} className="col-6 col-md-3 filter-height">
<div className="right-10 pos-tb-center">
<select style={{width: '494%'}} className="form-control input-sm">
<option>Sorter Efter</option>
<option>Nyeste</option>
<option>Pris: Lav til Høj</option>
<option>Pris: Høj til Lav</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="ptb-30 prl-30">
<div className="row row-tb-20">
{(this.props.category == null) ? null :
this.props.category.map((bike, i) => {
return (
<div key={i} className="col-sm-6 col-md-4 col-lg-3">
<div className="coupon-single panel t-center salg-shadow">
<div className="row">
<div className="col-xs-12">
<div className="text-center p-20">
<a href="#">
<img src={bike.attachments[0]}/>
</a>
</div>
</div>
<div style={{maxHeight: '220px', minHeight: '220px'}} className="col-xs-12">
<div className="panel-body">
<ul className="deal-meta list-inline mb-10">
<li style={{textTransform: 'capitalize'}} className="color-muted"><i className="ico fa fa-tag mr-5"></i>{bike.brand}</li>
<li className="color-muted"><i className="ico fa fa-cube mr-5"></i>{bike.size}</li>
<li className="color-muted"><i className="ico fa fa-thumb-tack mr-5"></i>{bike.year}</li>
</ul>
<h4 className="color-green mb-10 t-uppercase">DKK {bike.price}.00</h4>
<h5 className="deal-title mb-10">
{bike.title}
</h5>
<ul className="deal-meta list-inline mb-10">
<li style={{textTransform: 'capitalize'}} className="color-muted"><i className="ico fa fa-map-marker mr-5"></i>{bike.location}</li>
<br/>
<li className="color-muted"><i className="ico fa fa-user-circle mr-5"></i>{bike.name}</li>
</ul>
<div className="showcode">
<button className="btn btn-sm btn block more-info">Vis Mere</button>
<button className="btn btn-sm btn block more-info">Kontakt Info</button>
</div>
</div>
</div>
</div>
</div>
</div>
)
})
}
</div>
</div>
</div>
</div>
</div>
</main>
</div>
)
}
}
const stateToProps = (state) => {
return {
category: state.category.allBikes
}
}
const dispatchToProps = (dispatch) => {
return {
getAllBikes: (bike) => dispatch(actions.getAllBikes(bike))
}
}
export default connect(stateToProps, dispatchToProps)(Category)

If you are using React Router v3 or v2, you can access the query string params from the location.query object that passed to your component.
For example:
<Route path="category" component={Category} />
And then in your Category component, you can do this.props.location.query.year etc...
EDIT
Forgot to mention that react router v4 doesnt support this. you can read about other solution here
EDIT #2
Following you other question in comments:
Given the url you posted:
localhost:3000/category?year=2000&size=XL&brand=cervelo
By accesing this.props.location.query.year will return 2000
and this.props.location.query.brand will return cervelo and so on...