While following a tutorial video, I encountered an issue with the rows and columns classes in bootstrap.
The instructor in the video made a div with a row class and al the items seemed to work perfectly. When trying to duplicate the same things, all my items just stack on top of each other in a single column rather than multiple. Even when the browser is at full screen.
Here is the link to the video (https://www.youtube.com/watch?v=-edmQKcOW8s&t=19375s) # 1:51:52 is where the problem occurs
Any help would be greatly appreciated
export default class ProductList extends Component {
render() {
return (
<React.Fragment>
<div className="py-5">
<div className="container">
<Title name="our" title="products" />
<div classname="row">
<ProductConsumer>
{value => {
return value.products.map(product => {
return <Product key={product.id} product=
{product} />
})
}}
</ProductConsumer>
</div>
</div>
</div>
</React.Fragment>
)
}
}
Expected result would be that on a full screen browser items would be listed in 4 columns.
<div classname="row">
You have a typo here. It should be className.
Secondly, there is no col class in your code. Try adding this:
return(
<div className="col-3">
<Product key={product.id} product={product} />
</div>
)
Related
console.log(data.allShopifyProductVariant.nodes[0].product.title)
return (
<div>
<div>
{data.allShopifyProductVariant.nodes.map(node => {
<div>
{node.product.title}
</div>
})}
</div>
</div>
)
}
export const query = graphql`
query CollectionQuery {
allShopifyProductVariant(filter: {product: {productType: {in: "20 lb. Plotter Paper"}}}) {
nodes {
compareAtPrice
sku
price
product {
title
images {
gatsbyImageData(width: 150)
}
productType
}
}
}
}`
export default Collection;
Expecting this function to return the product title, for some reason it returns nothing. I've tried using dangerously set innerhtml but nothing comes up, no error. I am able to console.log the {node.product.title} and it returns exactly what I want to display but for some reason it is not rendering to the div. Any help is appreciated, thanks in advance :D
You are missing the return statement:
return (
<div>
<div>
{data.allShopifyProductVariant.nodes.map(node => {
return <div>
{node.product.title}
</div>
})}
</div>
</div>
)
Or using the implicit return:
return (
<div>
<div>
{data.allShopifyProductVariant.nodes.map(node => (
<div>
{node.product.title}
</div>
))}
</div>
</div>
)
i
I don't succeed to fix the bug
I need that in tablle show buttom
I copy the code from fluent UI https://developer.microsoft.com/de-de/fluentui#/controls/web/detailslist/customitemcolumns
enter image description here
but this in give bug in onrenderItem because the declared columns
enter image description here
i try this but have bug
enter image description here
i sucsses to fix the bug
return (
<div>
<div>
<div className="ms-Grid">
<div className="ms-Grid-row">
<DetailsList
items={item}
columns={columns}
setKey='set'
onRenderItemColumn={renderItemColumn}
/>
</div>
</div>
</div>
</div>
);
const renderItemColumn = (item: any, index: any, column: any) => {
let fieldContent = item[column.fieldName];
switch (column.key) {
case 'custem':
return <Link href="https://developer.microsoft.com/en-us/fluentui#/controls/web/link" >ukbkkbio</Link></span>
default:
return <span >{fieldContent}</span>;
}
}
https://codesandbox.io/s/rough-cache-vgl3p?file=/src/App.tsx
I am creating a mobile app with Ionic React. I render multiple IonCards with dynamic data coming from a local JSON file. Actually, I'm mapping through the JSON file. Everything is fine. But it takes a couple of seconds to render all the cards. I want to minimize the loading time. Please help me with how do I optimize the render time and overall performance of the application. The code is below:
//imports...
import data from "../db/data.json";
const Products: React.FC = (filterText) => {
const [searchText, setSearchText] = useState("");
const categories = vocabTopics
//filtering CATEGORIES
.filter((topic) => {return topic.title.toLowerCase().indexOf(searchText.toLowerCase()) >= 0;})
.map((topic) => {
return (
<IonCol size="12" key={topic.id}>
<IonCard mode="md" routerLink={topic.route} className="except-home-screen-card no-margin no-radius-card">
<div className="flex">
<div className="card-img">
<img src={topic.thumbnail}></img>
</div>
<div className="flex-justify-space-b-w">
<div>
<IonCardSubtitle className="except-home-screen-card-subtitle">{topic.subtitle}</IonCardSubtitle>
<IonCardTitle className="except-home-screen-card-title">{topic.title}</IonCardTitle>
</div>
<div>
<IonIcon icon={chevronForwardOutline} className="card-right-icon"/>
</div>
</div>
</div>
</IonCard>
</IonCol>
);
});
return (
<IonPage>
<IonHeader className="ion-no-border">
<IonToolbar className="top-header">
<IonButtons slot="start" className="top-header-icons color-primary">
<IonBackButton defaultHref="home" /></IonButtons>
<div className="top-title-container">
<IonTitle className="ion-text-center v-center">Products</IonTitle>
</div>
</IonToolbar>
</IonHeader>
<IonContent fullscreen className="bg-style">
<div className="center padding-y">
<h1 className="lg-text ion-no-margin equal-padding">Products Categories</h>
<p className="ion-text-center ion-no-margin subtitle">70+ CATEGORIES</p>
</div>
<IonGrid className="my-grid ion-no-padding">
<IonSearchbar spellcheck={true} autocorrect="on" className="searchbar" value={searchText} mode="ios" onIonChange={(e) => setSearchText(e.detail.value!)}></IonSearchbar>
<IonRow className="center-padding">
<div className="card-container fluid">
{categories}
</div>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
};
export default Products;
I suppose 100 Cards are not visible at the same time in a single "view", so the only solution is the "infinite scrolling" and Display/Create them only when them should became visible. (example: https://forum.ionicframework.com/t/infinite-scrolling-of-data-from-the-api/172933)
Apologies if this is straight forward. I am following a tutorial and it seems there is a syntax error. I am unable to find the right format for the following:
const productsToDisplay = this.props.shopData.shop.products
return (
<div classname="App">
<div classname="products-grid">
{productsToDisplay.edges.map((el, i)=> {
return(
<product key="{i}" product="{el.node}">
)
})}
</product>
</div>
</div>
);
}
}
The two divs under the closing product tag are not recognized by the above divs, as the first one states it is unclosed.
I believe this is due to the being in the return statement, and out of it - but I am unclear how this should be formatted.
Reference: http://www.codeshopify.com/blog_posts/building-a-store-with-react-step-2
error: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...?
Any help is appreciated!
There are two issues. The tutorial is importing Product as follows:
import Product from './Product.js';
but then the tutorial references it later as <product when it should be <Product.
The second issue is that the closing Product tag </product> should either be inside the return statement along with the open Product tag or just use a self-closing tag like this:
{productsToDisplay.edges.map((el, i)=> {
return(
<Product key="{i}" product="{el.node}" />
)
})}
So your complete return statement should look like this:
return (
<div classname="App">
<div classname="products-grid">
{productsToDisplay.edges.map((el, i)=> {
return(
<Product key="{i}" product="{el.node}" />
)
})}
</div>
</div>
);
Credits to #RyanCogswell for noticing the other issue with the uppercase P in <products>.
I'm trying to make this into a react component so I can use it in my website:
I don't know how to go about making this or, if any libraries are involved, I don't know which ones.
it looks like this component will take a few properties:
const CardsDisplay = ({numCards}) => { /* ... */ }
const AvatarDisplay = ({imageUrl, numCards, name, score, popupMenu }) =>
<div style={{textAlign: 'center'}}>
<div style={{display: 'flex', justifyContent: 'space-between'}}>
<img src={imageUrl} />
<CardsDisplay numCards={numCards} />
</div>
{name}
<br />
{score.toLocaleString()}
<popupMenu style={{float: 'right'}} />
</div>