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
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>
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
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>
)
}
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 />
</>;
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>
))}
</>