Develop Reference

How to render SVG images inside a div

I'm new to react and i hope someone can help me with this. I've searched everywhere for a solution to my problem with no luck.
Basically i want to render an array of SVG images inside a div as a backgroundImage: url().
I've managed to render my array with math.random but i want the SVG images to render in same order as in the array.
This is my code so far:
import './ListView.css';
import Green from '../Assets/ListCard/Green.svg';
import Brown from '../Assets/ListCard/Brown.svg';
import Orange from '../Assets/ListCard/Orange.svg';
import Mail from '../Assets/Icons/Mail.svg'
import Phone from '../Assets/Icons/Phone.svg'
function ListView({ userData}) {
const cardImages = [Green, Brown, Orange]; /// Array
const renderList = cardImages.map(function(image) { /// Tried to map through the array with -
return image; /// no luck
})
/// This Math.radom method works, but not the solution i want
const randomItem = cardImages[Math.floor(Math.random()*cardImages.length)];
return ( /// Below inside the div is where i want to render the images.
<div className="list-card" style={{backgroundImage: `url(${renderList})`}}>
<div className="list-card-wrapper">
<div className="list-user-image"><img src={userData.picture.medium} alt=""/></div>
<div className="list-user-info">
<div className="list-user-name">{userData.name.first} {userData.name.last}</div>
<div className="list-user-location">{userData.location.city}</div>
</div>
<div className="list-user-contact">
<img height={19} src={Mail} alt="svg"/>
<img height={19} src={Phone} alt="svg"/>
</div>
</div>
</div>
)
}
export default ListView```

you will need import image and bind it like below:
import logo from './logo.svg';
function App() {
return (
<div className="App">
<img src={logo} className="App-logo" alt="logo" />
</div>
);
}
export default App;

This is what you might be looking for:
import "./styles.css";
export default function App() {
const items = [
{ name: "first" },
{ name: "second" },
{ name: "third" },
{ name: "fourth" },
{ name: "fifth" },
{ name: "sixth" }
];
const colorArray = ["green", "brown", "orange"];
return (
<div className="App">
{items.map((item, index) => {
const classColorIndex = index % 3;
return (
<div
className={`list-card ${colorArray[classColorIndex]}`}
key={index}
>
<p>{item.name}</p>
</div>
);
})}
</div>
);
}
The main concept behind this is, that you have to focus on the index of the item and check if it the first, second, or third item (I am considering it 3 because you have 3 colors in the array). Now, according to index number, you need to add a class to that div, and using CSS, you could provide background to each div according to that array.
In this sample, I have used plain background color, but I have commented how you could use svg as well. on APP.css, and here is the css
.App {
font-family: sans-serif;
text-align: center;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list-card {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
flex-basis: 50%;
}
.list-card.green {
background: green;
/* background:url('../../Green.svg'); */
}
.list-card.brown {
background: brown;
}
.list-card.orange {
background: orange;
}
and here is the sandbox link:
https://codesandbox.io/s/stack-overflos-sample-z0yxyk?file=/src/App.js
On this example, you can see background is assigned, exactly to the array.

How to efficiently toggle classes with multiple HTML elements across multiple files

I am toggling an arrow image whenever my div is clicked. I am controlling the state of the click with
const [toggleArrow, setToggleArrow] = useState(false)
My div has an onClick function that controls the state and toggles the faq-subject-toggle-arrow class that adds an image
<div className={`faq-subject ${toggleArrow ? 'faq-subject-toggle-arrow' : ''}`} onClick={() => {
setToggleArrow(!toggleArrow)
}>
My problem is that I have 50 divs across multiple styles and don't want to make 50 states to toggle one image.
Is there a more efficient solution for this with less code?

I created something that does the same thing. I extracted your code and made a component. now the state lives inside the component and will not affect others.
live demo
component
import { useState } from "react";
export const Button = () => {
const [toggleArrow, setToggleArrow] = useState(false);
return (
<div
style={{ width: "50px", height: "50px", margin: "10px" }}
className={`faq-subject ${toggleArrow ? "faq-subject-toggle-arrow" : ""}`}
onClick={() => {
setToggleArrow(!toggleArrow);
}}
></div>
);
};
css file, I didn't have the same classes so I created mine.
.faq-subject {
background: blue;
}
.faq-subject-toggle-arrow {
background: orange;
}
now you can use it wherever you want for multiple times
import { Button } from "./button";
import "./styles.css";
export default function App() {
return (
<div className="App">
<Button />
<Button />
<Button />
<Button />
<Button />
</div>
);
}

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

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"
}

vertical Menu Ant design height 100%

Good afternoon. I'm new to web development and I'm not able to put the ant design menu (https://ant.design/components/menu/) at 100% of the screen height.
I tried to put <Layout style = {{height:" 100vh "}}> before the but it did not work.
Here's the code I'm using
.
.
.
.
.
import React from 'react'
import { Layout, Menu, Breadcrumb, Icon, Button } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;
export class SideMenu extends React.Component {
constructor(props){
super(props)
this.state = {collapsed: false}
}
toggleCollapsed (){
this.setState({
collapsed: !this.state.collapsed
})
}
render() {
return (
<div style={{ width: 256 }}>
<Menu
defaultSelectedKeys={[]}
defaultOpenKeys={[]}
mode="inline"
theme="light"
inlineCollapsed={this.state.collapsed}
>
<Menu.Item key="0">
<div onClick={this.toggleCollapsed.bind(this)}>
<Icon type={this.state.collapsed ? 'menu-unfold' : 'menufold'}/>
</div>
</Menu.Item>
...
<Menu.Item key="5">
<Icon type="rocket" />
<span>Funções</span>
</Menu.Item>
</Menu>
</div>
);
}
}
Thanks for your help.

Try to manage separate style sheet(in my case menu.less) and put it this code
it should be work
.menu-style {
height: 100vh;
width: 200px;
position: fixed;
}
just try it.

You can use ref get the DOM you wanted reference height. Then use the height at some Components.
function refIt(theDOM) {
const height = theDOM.clientHeight;
this.setState({ height });
}
return (<div ref={theDOM => refIt(theDOM)}>
<div height={this.state.height}>
</div>
</div>);