Develop Reference

How can I show the card I bought Antd side by side?

import { categories } from './data/categories'
import { useState } from 'react'
import {Card} from 'antd' import './App.css';
import image1 from './assets/images/Resim.png';
const { Meta } = Card;
const CategoryCard = () => {
const [categoriesList, setCategoriesList] = useState(categories)
return (
<>
{categoriesList.map((categori ,key)=>(
<div className='flex-container '>
<div className='flex-div'>
<Card
style={{ width: 240 }}
cover={<img alt="example" src={image1} />}
>
<Meta title={categori.name} description= {categori.description}/>
</Card>
</div>
</div>
))}
</>
); }
export default CategoryCard
I want to align the cards in threes side by side, I tried to do it
using display-flex, but I couldn't, can you help? The css codes I wrote are above.

your code is confusing, anyway if you wanna align them side by side you just add display: flex to the parent element.
(naturally, children will be horizontally aligned when you add display flex to their parent, and if you want them to be aligned vertically just add flex-direction: column;)
.flex-div{
display: flex;
}

making antd modal full screen without any padding or margins

I'm new to programming. Here I have an antd modal and I've been trying to find a way to make it full screen. I want the modal to be full scree when it's opened and it shouldn't have any margin or paddings. For example, in the code I added width={1000} but there is still some margin on the left and right of the modal.
So how do I make the modal to take the whole screen without any margin and padding?
code:
https://codesandbox.io/s/otjy6?file=/index.js:539-560

Remove the fixed value for modal width and the centered attribute from your code file:
index.js
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Modal, Button } from 'antd';
const App = () => {
const [visible, setVisible] = useState(false);
return (
<>
<Button type="primary" onClick={() => setVisible(true)}>
Open Modal of 1000px width
</Button>
<Modal
title="Modal 1000px width"
// This was removed
// centered
visible={visible}
onOk={() => setVisible(false)}
onCancel={() => setVisible(false)}
// This was removed
// width={'1000'}
>
<p>some contents...</p>
<p>some contents...</p>
<p>some contents...</p>
</Modal>
</>
);
};
ReactDOM.render(<App />, document.getElementById('container'));
You need to add these CSS rules to the CSS file.
index.css
.ant-modal, .ant-modal-content {
height: 100vh;
width: 100vw;
margin: 0;
top: 0;
}
.ant-modal-body {
height: calc(100vh - 110px);
}

you need to unset max-width and margin of modal
.ant-modal {
max-width: unset;
margin: unset;
}
you need to unset content in before pseudo-element of ant-modal-centered class
.ant-modal-centered::before {
content: unset;
}
Working Demo

I think instead of Modal you can use the Antd Drawer. Here is the implementation.
import React,{useState} from 'react';
import {Drawer} from 'antd;
const FullScreenDrawer = ()=>{
const [visible,setVisible] = useState(false)
return(
<>
<button onClick={()=>setVisible(true)/>
<Drawer
visible={isVisible}
onClose={() => setVisible(false)}
width="100VW"
>
The content goes here
</Drawer>
</>
);
}

React.js Popup modal for shopping cart

I am currently working on a shopping cart and I am trying to figure out how to have the modal appear once I click on the shopping cart icon. I have looked at the documentation for the semantic-ui for modals but it is vague as to how to get the modal to appear when clicking on something. I am using the semantic-ui class="ui modal" for the modal.
I was thinking of putting an onClick on the icon but was still confused as to how to go from there. Currently, I have the icon in another component and the shopping cart in another separate component. I want the items to appear inside of the pop-up modal which should be the shopping cart.
import React from 'react'
import { Icon } from 'semantic-ui-react';
const ShoppingCartIcon = () => {
return(
<Icon.Group size='big' className="shopping_cart_icon">
<Icon link name='shopping cart'/>
<Icon corner='top right'/>
</Icon.Group>
)
}
export default ShoppingCartIcon;
import React from 'react'
import Shirt from './Shirt';
class ShoppingCart extends React.Component {
render() {
const listShirts = this.props.shirts.map(shirt => {
return <Shirt key={shirt.id} {...shirt}/>
})
return(
<div className="ui modal">
<div className="content">
{listShirts}
</div>
</div>
)
}
}
export default ShoppingCart;
Currently, I do not have the functionality for adding items to the cart working yet. I just want to focus on getting the modal to show up once I click on the shopping cart icon

as far as I see, you are not using neither redux nor context api. you are passing props with props drilling.
so this is how you should organize your code step by step.
we render cartIcon component in the header.js. here is a classic header
Header.js
import CartDropdown from "../cart-dropdown/cart-dropdown.component";
class Header extends React.Component {
constructor(props) {
super(props);
state = { hidden: true, cartItems:[]};
}
toggleHidden() {
this.setState(() => ({ hidden: !this.state.hidden }));
}
render() {
return (
<div className="header">
<Link className="logo-container" to="/">
<Logo className="logo" />
</Link>
<div className="options">
<Link className="option" to="/shop">
SHOP
</Link>
<Link to="/contact" className="option">
CONTACT
</Link>
{/* <Link></Link> */}
<CartIcon />
</div>
{hidden ? null : (
<CartDropdown
toggle={this.toggleHidden}
cartItems={this.state.cartItems}
></CartDropdown>
)}
</div>
);
}
}
you said you have not set the addItem functionality yet. as you add items to the cartItems array you will display them in the cart.
now we need to set up the cartDropdown component.
const CartDropdown = ({ cartItems, toggleHidden }) => (
<div className="cart-dropdown">
<div className="cart-items">
{cartItems.length ? (
cartItems.map(item => <CartItem key={item.id} item={item} />)
) : (
<span className="empty-message"> Your cart is empty </span>
)}
</div>
<CustomButton
onClick={() => {
toggleHidden();
}}
>
GO TO CHECKOUT
</CustomButton>
</div>
);
here we need to add css for cartDropdown. I do not how you are dealing with your css. prop-types or scss but here is the css code so you can apply to your project.
css for cartDropdown component
.cart-dropdown {
position: absolute;
width: 240px;
height: 340px;
display: flex;
flex-direction: column;
padding: 20px;
border: 1px solid black;
background-color: white;
top: 80px;
right: 0;
z-index: 5;
.cart-items {
height: 240px;
display: flex;
flex-direction: column;
overflow: scroll;
}
.empty-message {
font-size: 18px;
margin: 50px auto;
}
button {
margin-top: auto;
}
}

How to create virtual scrolling for images using React js

Whats my requirement: i have some images in my external folder and i need to import to component and display it and also have to use Virtual Scroll here i have to display 1 row in div and in that 1 row have to show 5-6 images
What i did : i consumed images using context from external folder and showed images in 1 rows in div and 5-6 images but i am facing issue unable to set it to Virtual scrolling
as i checked react-virtualized & react-window plugin but i am not sure how my data is used in that format
After using the react-tiny-virtual-list images are getting stacked
below is my code
class App extends React.Component{
state={
Response:[],
}
importAll(r) {
return r.keys().map(r);
}
componentWillMount() {
let data = this.importAll(require.context('./imageFolder/', false, /\.(png|jpe?g|svg)$/));
this.setState({ Response:data})
}
render(){
return(
<div className="container" id="imagecontainer">
<div className="viewport">
{this.state.Response.map((image, index) => <img key={index} src={image} alt="info"></img> )} }
</div>
</div>
)
}
.container {
padding: 0% 6%;
height: 400px;
}
.viewport {
height: -webkit-fill-available;
width: 100%;
border: 1px solid black;
overflow: scroll;
}
img {
height: 250px;
width: 150px;
padding: 35px;
}
After implementing React-tiny-list
<div id="container">
<div id="viewport">
<VirtualList
height='400px'
width='100%'
itemCount={this.state.items.length}
itemSize={20} // Also supports variable heights (array or function getter)
style={{padding:'20px'}}
renderItem={({index, style}) =>
<div key={index} style={style}>
<img key={index} src={this.state.items[index]} alt="info"></img>
</div>
}
/>
</div>
</div>

you can also use the https://github.com/bvaughn/react-virtualized plugin in this if you want to display this as table you can choose list or you can choose grid also .For you requirement i recommend using Masonry from 'react-virtualized';
below is the sample for displaying
import React from 'react';
import {
CellMeasurer,
CellMeasurerCache,
createMasonryCellPositioner,
Masonry
} from 'react-virtualized';
import 'react-virtualized/styles.css';
var images = [];
const columnWidth = 250;
const defaultHeight = 260;
const defaultWidth = columnWidth;
const cache = new CellMeasurerCache({
defaultHeight,
defaultWidth,
fixedWidth: true
})
// Our masonry layout will use 3 columns with a 10px gutter between
const cellPositioner = createMasonryCellPositioner({
cellMeasurerCache: cache,
columnCount: 4,
columnWidth,
spacer: 27
})
function cellRenderer ({ index, key, parent, style }) {
const datum = images[index]
const height = columnWidth || defaultHeight ;
return (
<CellMeasurer
cache={cache}
index={index}
key={key}
parent={parent}
>
<div style={style}>
<img
src={datum}
style={{
height: height,
width: columnWidth,
display: "block"
}}
alt="info"
/>
</div>
</CellMeasurer>
)
}
class Grid extends React.Component{
importAll(r) {
return r.keys().map(r);
}
componentWillMount() {
images = this.importAll(require.context('../imageFolder/', false, /\.(png|jpe?g|svg)$/));
}
render(){
return(
<div id="container">
<div id="viewport">
<Masonry
cellCount={images.length}
cellMeasurerCache={cache}
cellPositioner={cellPositioner}
cellRenderer={cellRenderer}
height={400}
width={1320}
/>
</div>
</div>
)
}
}
export default Grid;
I hope this will resolve your issue

If you're having trouble implementing the virtual scroll, note that the order of the imports is important when doing this, so pay heed to this - it could be contributing to your issue. (An aside: There is an npm plugin for implementing a virtual list.)
An overview of the import order for virtual scroll is:
import * as React from 'react';
import Paper from '#material-ui/core/Paper';
import {
Grid,
VirtualTable,
TableHeaderRow,
} [from material ui];
import {
your-components
} from 'your-path';
(above is non-specific, just a rough guide to the order)
You could also use a ScrollView if you are unable to implement a "Virtual scroll".
The following style will give you a horizontal scroll (as opposed to the default vertical), to enable you to display your images in a horizontally-scrollable row
<ScrollView horizontal={true}>
Hope this helps

React.js parent and sibling components: Keep only one nav bar div expanded at a time

I am new to React.js, and I'm learning by converting a website made in vanilla javascript to a React.js application. However, I am having trouble replicating the drop-down menu functionalities on the navigation bar.
Each section is comprised of divs with an onClick that expands its contents vertically to be viewable by changing overflow and height css settings. However, there's a catch: Only one drop-down should be expanded at a time. I was able to do this in the regular JS site, but I would like use parent-child and sibling relationships between components in React to get the same effect in the new rendition.
With an onClick event, one tab of the bar should open and, if any other tabs are expanded, close them.
I tried to use info from the solutions to this question, but it's not in class-component form and deals with inputs rather than divs. In addition, most search results regarding this only concern vanilla js, not React.js.
At first I attempted keeping states in the parent component, but their asynchronous nature made it a struggle to update them at just the right time.
Here I have stripped down the other irrelevant components of the site and provided a replication of my issue.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Tab from './Tab';
import './index.css';
class TabBar extends React.Component {
constructor() {
super();
this.state = {
//currently no states
}
}
render() {
return (
<div className="tab_bar">
<Tab name="Tab 1" />
<Tab name="Tab 2" />
<Tab name="Tab 3" />
</div>
)
}
}
class Main extends React.Component {
render() {
return (
<TabBar />
)
}
}
ReactDOM.render(<Main />, document.getElementById('root'));
Tab.js:
import React from 'react';
class TabHeader extends React.Component {
constructor() {
super();
}
render() {
return (
<div className="tab_header" onClick={this.props.onClick}>
<h3>{this.props.name}</h3>
</div>
)
}
}
class Tab extends React.Component {
constructor(props) {
super(props);
this.state = {
height: "7vh",
overflow: "hidden"
}
this.changeTabHeight = this.changeTabHeight.bind(this);
}
changeTabHeight() {
if (this.state.height === "7vh") {
this.setState({
height: "20vh",
overflow: "unset"
});
} else {
this.setState({
height: "7vh",
overflow: "hidden"
});
}
}
render() {
return (
<div className="tab_container" style={{overflow: this.state.overflow, height: this.state.height}}>
<TabHeader name={this.props.name} onClick={this.changeTabHeight} />
<div className="tab">
<p>This is the tab content.</p>
</div>
</div>
)
}
}
export default Tab;
index.css:
.body, .root {
width: 100%;
height: 100%;
}
.tab_bar {
width: 100%;
height: 10%;
display: flex;
}
.tab_container{
height: 7vh;
margin: 0;
display: inline-block;
background-color: #82d86c;
border-left: 1px solid #99ff7f;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
}
.tab_header {
display: flex;
align-items: center;
vertical-align: middle;
height: 7vh;
text-align: center;
background-color: #99ff7f;
}
.tab_header h3 {
margin: 0;
}
.tab {
margin: 0;
padding: 5px;
}
Expected result:
When a tab on the nav bar is clicked, it expands and displays information below it. Clicking it again reverts the tab back to its original height and hides. Clicking another tab while one is currently open will close the old one and expand the new one.
Actual result:
Currently they expand as expected, but they don't have a means of closing each other yet. It needs a structure in the parent to keep track of the drop-downs.

The problem you have currently is that you handle the state directly in Tab component which is a children component inside TabBar.
Below the modular way as you expect.
index.js: We can improve it by creating an array of Tab and iterating through this tab
import React from "react";
import ReactDOM from "react-dom";
import Tab from "./Tab";
import "./index.css";
class TabBar extends React.Component {
constructor() {
super();
this.state = {
selectedTab: null,
};
this.onSelectTab = this.onSelectTab.bind(this);
}
onSelectTab(tabIndex) {
// In case the user clicks again on the tab, unselect it
const selectedTab = this.state.selectedTab === tabIndex ? false : tabIndex;
this.setState({ selectedTab });
}
render() {
return (
<div className="tab_bar">
<Tab
name="Tab 1"
isSelected={this.state.selectedTab === 0}
onClickTab={() => this.onSelectTab(0)}
/>
<Tab
name="Tab 2"
isSelected={this.state.selectedTab === 1}
onClickTab={() => this.onSelectTab(1)}
/>
<Tab
name="Tab 3"
isSelected={this.state.selectedTab === 2}
onClickTab={() => this.onSelectTab(2)}
/>
</div>
);
}
}
class Main extends React.Component {
render() {
return <TabBar />;
}
}
ReactDOM.render(<Main />, document.getElementById("root"));
Tab.js: Keep in mind that it is way better to have functional components, without states.
import React from "react";
class TabHeader extends React.Component {
constructor() {
super();
}
render() {
return (
<div className="tab_header" onClick={this.props.onClickTab}>
<h3>{this.props.name}</h3>
</div>
);
}
}
class Tab extends React.Component {
constructor(props) {
super(props);
}
render() {
// Moved the style in the CSS rather than in function + state
// The !!this.props.isSelected allow to always return false / true response
return (
<div className={ `tab_container is-selected-${!!this.props.isSelected}`}>
<TabHeader name={this.props.name} onClickTab={this.props.onClickTab} />
<div className="tab">
<p>This is the tab content.</p>
</div>
</div>
);
}
}
export default Tab;
index.css: Add these two classes as it is better to use style in css instead of directly inside the component
.is-selected-true {
height: "20vh",
overflow: "unset"
}
.is-selected-false {
height: "7vh",
overflow: "hidden"
}