I'm a beginner in React Js, and I'm using React Js with BootStrap 5.2.0
My product cards are not getting displayed in a row
I want to display 4 product cards in a row.
Adding Codes:
Home Page code:
<div className="container-fluid mb-2">
<Carousel />
<div className="mt-2">
<div className="row">
<div className="col-md-2">
<GetAllCategories />
</div>
<div className="col-md-10">
<div className="row row-cols-1 row-cols-md-4 g-4">
<div className="col">
{products.map((product) => {
return <ProductCard item={product} />;
})}
</div>
</div>
</div>
</div>
</div>
</div>
PRODUCT CARD CODE:
const ProductCard = (product) => {
return (
<div class="card border-color rounded-card card-hover product-card custom-bg">
<img
src={"http://localhost:8080/api/product/" + product.item.imageName}
class="card-img-top rounded mx-auto d-block m-2"
alt="img"
style={{
maxHeight: "270px",
maxWidth: "100%",
width: "auto",
}}
/>
<div class="card-body text-color">
<h5 class="card-title d-flex justify-content-between">
<div>
<b>{product.item.title}</b>
</div>
<CategoryNavigator
item={{
id: product.item.category.id,
title: product.item.category.title,
}}
/>
</h5>
<p className="card-text">
<b>{product.item.description}</b>
</p>
</div>
<div class="card-footer">
<div className="text-center text-color">
<p>
<span>
<h4>Price : ₹{product.item.price}</h4>
</span>
</p>
</div>
<div className="d-flex justify-content-between">
<Link
to={`/product/${product.item.id}/category/${product.item.category.id}`}
className="btn bg-color custom-bg-text"
>
Add to Cart
</Link>
<p class="text-color">
<b>
<i>Stock :</i> {product.item.quantity}
</b>
</p>
</div>
</div>
</div>
);
};
export default ProductCard;
From the past 4 days, I'm struggling to resolve this issue.
Please help me to fix this.
Thank You
You need to move <div className="col"> from home page to ProductCard as first element in return statement. Sample code at https://codesandbox.io/s/falling-thunder-swzukd
Below, I have a code that is eventually rendered as a route in a react, single page, app. What I was hoping to get, was that depending on what div was clicked, each applying a 'filter', that the component variable, will change components, based off what was imported.
import React from "react";
import { useState } from 'react';
import UpperLevel from "./UpperLevel";
import Grid from "./Grid";
import GridCardio from "./GridCardio";
import GridHome from "./GridHome";
import GridGym from "./GridGym";
import GridUpper from "./GridUpper";
import GridLower from "./GridLower";
const marginAuto = {
margin: "auto"
};
const cursorPointer = {
cursor: "pointer"
};
function ExercisesLauncher() {
const component=<Grid/>;
function applyCardio() {
const component=<GridCardio/>
}
function applyGym() {
alert( "GymClicked" );
}
function applyHome() {
alert( "HomeClicked" );
}
function applyUpper() {
alert( "UpperClicked" );
}
function applyLower() {
alert( "LowerClicked" );
}
return (<main>
<section class="colored-section" id="title">
<div class="container-fluid">
<div class="row">
<div class="container-fluid main-text">
<h1 class="big-heading">Exercises</h1>
<p>
Below, feel free to navigate to whatever execrises you may find useful for your next workout. Either learn more about the exercise, or add it to your catelog to later add to your scheduler.
</p>
</div>
</div>
<h2 class="normal-heading mb-4">Group</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Gym" onClick={applyGym} class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">Gym</h1>
</div>
<div class="card-body">
<p>You have equipment that is found at an ordinary gym.</p>
</div>
</div>
</div>
<div id="Home" onClick={applyHome} class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">At Home</h1>
</div>
<div class="card-body">
<p>
Small, mobile, or convenient equipment that still has use.
</p>
</div>
</div>
</div>
</div>
<h2 class="normal-heading mb-4">Equipment</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Upper" onClick={applyUpper} class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Upper Body</h1>
<p>
Includes the chest, arms, shoulders, and anything else above the waist.
</p>
</div>
</div>
</div>
<div id="Lower" onClick={applyLower} class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Lower Body</h1>
<p>
Includes the quadriceps, hamstrings, glutes, and anything else below the waist.
</p>
</div>
</div>
</div>
<div id="Cardio" onClick={applyCardio} class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Cardio</h1>
<p>
Any exercise that benefits the cardio-system that gets the heart pumpin.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="album py-5 black-section">
<div id="root" class="container">
//THIS WILL CHANGE BASED ON CLICKS
{component};
</div>
</div>
</section>
<footer id="footer">
<div class="container-fluid">
<a href="index.html">
{" "}
<img class="logo mb-3" src="https://raw.githubusercontent.com/fabianenavarro/Get-a-Grip/main/public/images/fist.png" alt=""/>
</a>
<p>2022 Getta Grip! LLC</p>
</div>
</footer>
</main>);
}
export default ExercisesLauncher;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
So far, I added alerts to make sure the server recognized these div elements being clicked, now, I just wish to apply the respective component to the body after a div is clicked. The main grid component does load where {component} is, which is perfect, I just do not know why the GridCardio component is not switching out the Grid component
Rather than loading Grid into a component, that is loaded into another component, I used in my App2 to load the page(compiled everything pertaining to this page) and came up with this script, which was a lot easier than I thought it would be. I learned that I had to rerender my components! This does exactly what I needed! I had a lot of unnecessary components and this was the best approach in my opinion. I am also trying to get my mind used to using arrow notation, so do not mind the "function's
import React, { useState } from 'react';
import {render} from 'react-dom';
import NavBar from "./components/NavBar";
import Grid from "./components/Exercises/Grid";
import GridCardio from "./components/Exercises/GridCardio";
import GridHome from "./components/Exercises/GridHome";
import GridGym from "./components/Exercises/GridGym";
import GridUpper from "./components/Exercises/GridUpper";
import GridLower from "./components/Exercises/GridLower";
const marginAuto = {
margin: "auto"
};
const cursorPointer = {
cursor: "pointer"
};
//THIS IS ALL RESPONSIBLE FOR LOADING EVERYTHING IN ONE PAGE DONT WORRY ABOUT IT
function App2() {
// const [display, setState] = React.useState(<Grid/>);
let component = <Grid/>;
const [gridState, changePlease] = useState(component);
function applyHome(){
changePlease(<GridHome/>);
}
function applyCardio(){
changePlease(<GridCardio/>);
}
function applyLower(){
changePlease(<GridLower/>);
}
function applyUpper(){
changePlease(<GridUpper/>);
}
function applyHome(){
changePlease(<GridHome/>);
}
function applyGym(){
changePlease(<GridGym/>);
}
return (<section>
<NavBar/>
<main>
<section class="colored-section" id="title">
<div class="container-fluid">
<div class="row">
<div class="container-fluid main-text">
<h1 class="big-heading">Exercises</h1>
<p>
Below, feel free to navigate to whatever execrises you may find useful for your next workout. Either learn more about the exercise, or add it to your catelog to later add to your scheduler.
</p>
</div>
</div>
<h2 class="normal-heading mb-4">Group</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Gym" class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyGym} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">Gym</h1>
</div>
<div class="card-body">
<p>You have equipment that is found at an ordinary gym.</p>
</div>
</div>
</div>
<div id="Home" class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyHome} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">At Home</h1>
</div>
<div class="card-body">
<p>
Small, mobile, or convenient equipment that still has use.
</p>
</div>
</div>
</div>
</div>
<h2 class="normal-heading mb-4">Equipment</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Upper" class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyUpper} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Upper Body</h1>
<p>
Includes the chest, arms, shoulders, and anything else above the waist.
</p>
</div>
</div>
</div>
<div id="Lower" class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyLower} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Lower Body</h1>
<p>
Includes the quadriceps, hamstrings, glutes, and anything else below the waist.
</p>
</div>
</div>
</div>
<div id="Cardio" onClick={applyCardio} class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Cardio</h1>
<p>
Any exercise that benefits the cardio-system that gets the heart pumpin.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="album py-5 black-section">
<div id="root" class="container">
{/* THIS WILL CHANGE BASED ON CLICKS */}
{gridState}
</div>
</div>
</section>
<footer id="footer">
<div class="container-fluid">
<a href="index.html">
{" "}
<img class="logo mb-3" src="https://raw.githubusercontent.com/fabianenavarro/Get-a-Grip/main/public/images/fist.png" alt=""/>
</a>
<p>2022 Getta Grip! LLC</p>
</div>
</footer>
</main>);
</section>);
}
export default App2;
You're tripping up on the way you're using your component variable. You don't want to re-declare the variable, you just want to assign a new value
function ExercisesLauncher() {
var component=<Grid/>;
function applyCardio() {
component=<GridCardio/>;
}
...
I'm trying to use the Simple React Lightbox (SRL), from https://www.npmjs.com/package/simple-react-lightbox, but I it doesn't work. It seems simple but I guess I'm doing something wrong. I want when I click the image link, a light box with the same image to open. I tried making my own lightbox in different component but it still doesn't work.
my code
import logo from './movieBrowser.jpg';
import logo2 from './portfolio-2.jpg';
import logo3 from './portfolio-3.jpg';
import logo4 from './portfolio-4.jpg';
import { SRLWrapper } from "simple-react-lightbox";
const Projects = () =>{
return(
<div id="project">
<div className="container-fluid p-2 mb-0 ">
<div className="row g-0 m-4">
<SRLWrapper>
<div className="col-lg-4 col-sm-6 p-1">
<a className="portfolio-box" href={logo3} title="Project Name">
<img className="img-fluid" src={logo3} alt="ptoject name" />
<div className="portfolio-box-caption">
<div className="project-category text-white-50">Category</div>
<div className="project-name">Project Name</div>
</div>
</a>
</div>
</SRLWrapper>
<div className="col-lg-4 col-sm-6 p-1">
<a className="portfolio-box" href={logo4} title="Project Name">
<img className="img-fluid" src={logo4} alt="..." />
<div className="portfolio-box-caption">
<div className="project-category text-white-50">Category</div>
<div className="project-name">Project Name</div>
</div>
</a>
</div>
<div className="col-lg-4 col-sm-6 p-1">
<a className="portfolio-box" href={logo2} title="Project Name">
<img className="img-fluid" src={logo2} alt="..." />
<div className="portfolio-box-caption">
<div className="project-category text-white-50">Category</div>
<div className="project-name">Project Name</div>
</div>
</a>
</div>
<div className="col-lg-4 col-sm-6 p-1">
<a className="portfolio-box" href={logo} title="Project Name">
<img className="img-fluid" src={logo} alt="..." />
<div className="portfolio-box-caption">
<div className="project-category text-white-50">Category</div>
<div className="project-name">Project Name</div>
</div>
</a>
</div>
<div className="col-lg-4 col-sm-6 p-1">
<a className="portfolio-box" href={logo4} title="Project Name">
<img className="img-fluid" src={logo4} alt="..." />
<div className="portfolio-box-caption">
<div className="project-category text-white-50">Category</div>
<div className="project-name">Project Name</div>
</div>
</a>
</div>
<div className="col-lg-4 col-sm-6 p-1">
<a className="portfolio-box" href={logo3} title="Project Name">
<img className="img-fluid" src={logo3} alt="..." />
<div className="portfolio-box-caption p-3">
<div className="project-category text-white-50">Category</div>
<div className="project-name">Project Name</div>
</div>
</a>
</div>
</div>
</div>
</div>
)
}
export default Projects;
I have a Jumbotron I cannot get any to stretch to fill 100% width. Can anyone help?
I have tried "container-fluid" as well as "jumbotron-fluid" and neither has worked.
Without stepping into css styling I am hoping for any help as to why my Jumbotron won't extend to the full-width of the screen in small-to-xtra-large screen sizes.
Edits have been made to reflect the full code of the component I am attempting to improve.
function RenderCard({ item, isLoading, errMess }) {
if (isLoading) {
return (
<Loading />
);
}
else if (errMess) {
return (
<h4>{errMess}</h4>
)
}
else
return (
<FadeTransform in
transformProps={{ exitTransform: 'scale(0.5) translateY(-50%)' }}>
<div className="row justify-content-center">
<div className="col-12 col-sm-7 col-md-7 ">
<CardDeck>
<Card>
<CardBody >
<div className="text-center">
<CardImg src={baseUrl + item.image} alt="" />
<CardTitle className="bg-primary text-white">{item.name}</CardTitle>
<img src={baseUrl + item.image2} fluid="true" alt="" />
<img src={baseUrl + item.image3} alt="" />
<CardText>{item.shortDescription}</CardText>
<CardText>{item.label}</CardText>
<a href={item.link}>{item.word}</a>
</div>
</CardBody>
</Card>
</CardDeck>
</div>
</div>
</FadeTransform>
);
}
function Home(props) {
return (
<div className="container-fluid">
<div className="jumbotron">
<div className="row">
<div className="col-12 col-sm-12 col-md-6">
<h1>This doesn't make sesnes</h1>
<h5>...Lorem Ipsum</h5>
</div>
<div className=" col-12 col-sm-6 col-md-6">
<Image src={baseUrl + ("assets/logos/devLogo.png")} fluid="true" alt="Developer Image" />
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-sm-12 col-md-12 col-lg-12">
<h2 className="text-center text-color">My Skills</h2>
</div>
<div className="row-content">
<div className="row">
<div className=" col-12 col-md-4 col-lg-4">
<h5 className="text-center text-color"> FullStack Web Development</h5>
<Fade in>
<ul className="no-bullets text-color">
...(images
</ul>
</Fade>
</div>
<div class="col-12 col-md-4 col-lg-4">
<h5 class="text-center text-color"> Database Administration </h5>
<Fade in>
<ul class="no-bullets text-color">
... (images)
</ul>
</Fade>
</div>
<div class="col-12 col-md-4 col-lg-4">
<h5 class="text-center text-color"> Application Development </h5>
<Fade in enterOpacity={0.95}>
<ul class="no-bullets text-color">
... (images)
</ul>
</Fade>
</div>
</div>
</div>
</div>
<h2 class="text-center text-color">Some Featured Works</h2>
<div className="row">
<div className="col-12 col-sm col-md-6">
<RenderCard item={props.project}
isLoading={props.projectsLoading}
errMess={props.projectsErrMess} />
</div>
<div className="col-12 col-sm col-md-6">
<RenderCard item={props.project1}
isLoading={props.projectsLoading}
errMess={props.projectsErrMess} />
</div>
</div>
</div>
);
}
export default Home;
...
and my css file has :
.jumbotron {
padding: 70px 30px 70px 30px;
margin: 0px auto;
background-color: #141414;
color: floralwhite;
}
Why does it only fill what seems to be 75% of the width of an entire page?
Any help greatly appreciated :)
Thank you again in advance!
<div className="container-fluid">
<header className="jumbotron ">
<div className="row">
<div className="col-12 col-sm-6 col-md-6 ">
<h1>This doesn't make sesnes</h1>
<h5...</h5>
</div>
<div className="align-self-center col-12 col-sm-6 col-md-6">
<Image src={baseUrl + ("assets/logos/devLogo.png")} fluid alt="Developer Image" />
</div>
</div>
</header>
To have the container span the full viewport width, you need to use the container-fluid class with the parent <div>
Before inserting
<ReactHighcharts config={barchartdata}></ReactHighcharts>
<div className="col-md-6 mb-3">
<div className="card">
<div className="card-header d-flex">
<h5 className="card-title mr-auto"> Team Wise Total Revenue</h5>
</div>
<div className="card-body">
<figure>
</figure>
</div>
</div>
</div>
let barchartdata = this.state.reports.chartslist.charts[0];
console.log("databarchart", this.state.reports.chartslist.charts[0]);
I can able to get the data.
<div className="col-md-6 mb-3">
<div className="card">
<div className="card-header d-flex">
<h5 className="card-title mr-auto"> Team Wise Total Revenue</h5>
</div>
<div className="card-body">
<figure>
<ReactHighcharts config={barchartdata}></ReactHighcharts>
</figure>
</div>
</div>
barchartdata has following response too:
config must be specified error