Introduce a div between a loop to add flex - javascript

This is what I currently have which displays fine.
I end up with 4 rows and 4 columns.
<div>
{(
<Table
data={{
body: Object.keys(conduitData).map((key) => {
const conduitArray = conduitData[key];
return conduitArray.map(category => ({
content:
<div>
<ConduitSelector
data={{title: category.name}}
/>
</div>
}));
}),
}}
/>
)}
</div>
But the CSS does not wrap and the content keeps squeezing into the same row.
I want it to flex down if there is more than 3 items in a row.
I want to be able to wrap each row into another div so that I could introduce flex css properties as follows:
conduitData is a map.
conduitArray is an array.
<div>
{(
<Table
data={{
body: Object.keys(conduitData).map((key) => {
const conduitArray = conduitData[key];
// (parent) I want to add this div to introduce css flex
return <div style={{display: 'flex'}}>
{conduitArray.map(category => ({
content:
// adding flex properties here too
<div style={{flex: '0 0 33.333333%'}}>
<ConduitSelector
data={{title: category.name,}}
/>
</div>,
}))}
</div>
}),
}}
/>
)}
</div>
But when I run this, I end up with the following error.
Error!row.map is not a function
Is there a way I could overcome this error?

I dont see why you cant put the styles in the surrounding your Table.
<div style="display: flex; flex-wrap: wrap;">
<conduit div style="flex-basis: 33.333333%">
</div>
</div>
EDIT
maybe wrap around the return function instead?
return <div>{ conduitArray.map(category => ({
content:
<div>
<ConduitSelector
data={{title: category.name}}
/>
</div>
})) }</div>;

Related

Flex element just keep expanding

I have a block element,
I want to change the element to flex and add it no wrap,
now when I change the element to flex, the items inside it just keep expanding the entire page,
I don't want to change my entire project
and I don't want to have to use fixed width,
why doesn't the flex element behave just like block element?
<div>
<div
style={{
display: 'flex',
}}>
{chips.map((option, index) => {
return (
<Tooltip
key={option.name}
title={isChipFoundInOptions ? '' : 'Option not found in this profile context.'}>
<Chip
label={`${option.displayName} - ${option.name}`}
// {...getChipProps({ index })}
/>
</Tooltip>
)
})}
</div>
</div>

How do I show multiple items using bootstrap carousel

I am trying to use carousel in my react project to show reviews. I am using bootstrap carousel.
This is the carousel I am using
But I want to use like this
Every click on the button will slide in a item and one item will slide out.
I can do one at a time but not like this.
Here is my Code:
const ShowReviews = () => {
const { data: reviews, isLoading, refetch } = useQuery('reviews', () => fetch('https://.herokuapp.com/reviews',)
.then(res => res.json()))
refetch()
if (isLoading) {
return <Loading></Loading>
}
return (
<div>
<h1 className='text-center fw-bold my-5'>User Reviews ({reviews.length})</h1>
<div className='bg-dark bg-opacity-25 container-fluid'>
<Carousel>
{reviews.map(review => <Carousel.Item> <ReviewCard
key={review._id}
review={review}
></ReviewCard></Carousel.Item>)}
</Carousel>
</div>
</div>
);
};
export default ShowReviews;
Just put three review cards per Carousel.Item instead of one. Carousel.Item is just a wrapper for one carousel "page".
Carousel.Item is already styled in a certain way, that's why you need a container/wrapper right below it. In my example I used Stack with direction="horizontal":
<Carousel.Item style={{ height: 500 }}>
<Stack
direction="horizontal"
className="h-100 justify-content-center align-items-center"
gap={3}
>
<Card>...</Card>
<Card>...</Card>
<Card>...</Card>
</Stack>
</Carousel.Item>
https://codesandbox.io/s/relaxed-poitras-4w774i

Loading an array of videos in two columns in React

I'm trying to get videos to load two videos per row down the page in order and i'm having trouble figuring out how. Currently I have them loading from contentful in one column with this:
const VideoPage = ({ data }) => {
return (
<div>
<Layout>
<Head title="Videos"/>
<div className={videoStyles.container}>
{data.allContentfulVideoEmbed.nodes.map((node) => {
return (
<div>
<div className={videoStyles.videoWrapper}
dangerouslySetInnerHTML={{ __html: node.markdownContent.childMarkdownRemark.html }}
/>
<div className={videoStyles.titles}>
<p>{node.title}</p>
</div>
</div>
);
})}
</div>
</Layout>
</div>
)
}
Does anyone know how to go about this?
Simply throw them into a grid with 2 columns, each looped item will then be placed in corrosponding columns 1 - 2 for each row. For instance with Tailwindcss
const VideoPage = ({ data }) => {
return (
<div>
<Layout>
<Head title="Videos"/>
<div className="grid grid-cols-2">
{data.allContentfulVideoEmbed.nodes.map((node) => {
return (
/**
* Every nth 1 will be column 1
* Every nth 2 will be column 2
*/
<div>
<div className={videoStyles.videoWrapper}
dangerouslySetInnerHTML={{ __html: node.markdownContent.childMarkdownRemark.html }}
/>
<div className={videoStyles.titles}>
<p>{node.title}</p>
</div>
</div>
);
})}
</div>
</Layout>
</div>
)
}

How can I style map items to display in justify-content-around?

I'm looping through products by mapping them and the justify-content-around doesn't apply to them and I'm using bootstrap 4 in my react project .
Here is my code :
{props.products.map((item) => {
if (item.inCart) {
return (
<div className="d-flex justify-content-around w-100" key={item.id}>
<button>remove</button>
<div>
<h5>{item.name}</h5>
</div>
<div>
<h5>{item.price.toLocaleString('ar-EG')}</h5>
</div>
<div>
<h5>{item.number.toLocaleString('ar-EG')}</h5>
</div>
<div>
<h5>{(item.number * item.price).toLocaleString('ar-EG')}</h5>
</div>
<hr />
</div>
);
}
The display flex class applies but not the other one and they all have no margin between them .
How can I make them to display justify-content-around ??
Your problem come from the <hr> tag. I just discovered it by doing this repro on stackblitz. Remove it and it works.
If you readlly need it then just receate it:
const Divider = () => {
return <div className="border-bottom" />;
};
This one is bootstrap dependant but of course you can make it generic easily. You just need to apply it outside of your flex container :
<>
<div className='d-flex justify-content-around' key={item.id}>
<button>remove</button>
<h5>{item.name}</h5>
<h5>{item.name}</h5>
<h5>{item.name}</h5>
</div>
<Divider />
</>;

How to make images fit the page in React/Bootstrap?

I am using a function that maps every item in the props array to creating an image tag. I am trying to make every 3 images have a row div around them using bootstrap so they will fit the page correctly, but I cannot figure out how to do it. Any help would be appreciated. Here is the code:
import React, { Component } from 'react';
import "./Skills.css";
export default class Skills extends Component {
static defaultProps = {
images: [
"https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png",
"https://p7.hiclipart.com/preview/306/37/167/node-js-javascript-web-application-express-js-computer-software-others.jpg",
"https://bs-uploads.toptal.io/blackfish-uploads/skill_page/content/logo_file/logo/5982/express_js-161052138fa79136c0474521906b55e2.png",
"https://webassets.mongodb.com/_com_assets/cms/mongodb_logo1-76twgcu2dm.png",
"https://www.pngfind.com/pngs/m/430-4309307_react-js-transparent-logo-hd-png-download.png",
"https://botw-pd.s3.amazonaws.com/styles/logo-thumbnail/s3/012015/bootstrap.png?itok=GTbtFeUj",
"https://sass-lang.com/assets/img/styleguide/color-1c4aab2b.png"
]
}
photo() {
return (
<div >
{this.props.images.map(image => (
<div className="col-md-4">
<img className="photo" src={image} />
</div>
))}
</div>
);
}
render() {
return (
<div id="skills-background" className="mt-5">
<div id="skills-heading" className="text-center">Skills I've Learned:</div>
<div className="container">
<div className="row">
{this.photo()}
</div>
</div>
</div>
)
}
}
CodeSandbox
I think, I found the issue,
<div> <-----This div is the issue
{this.props.images.map(image => (
<div className="col-md-4">
<img className="photo" src={image} />
</div>
))}
</div>
You have wrapped your col-md-4 with a div, and div has display: block style, so you are getting every image on separate row. Simply replace div with Fragments,
<> <-----Make it Fragment
{this.props.images.map(image => (
<div className="col-md-4">
<img className="photo" src={image} />
</div>
))}
</>

Categories