I am building a BlackJack game and I am mapping over a dealer cards array to display the dealer cards. I want to hide the first card that is returned from the array.
This is my DealerCards component.
import React from 'react'
const DealerCards = props => {
return (
<div className="text-center">
Dealer Cards
<div className="text-center m-auto flex justify-center">
{props.dealerCards.length > 0 ? (
<div className="mx-auto flex justify-center">
{props.dealerCards.map(card => (
<div key={card[0].code}>
<img
className="m-5 h-40 dealer-cards"
src={card[0].image}
alt={card[0].code}
/>
</div>
))}
</div>
) : (
<div></div>
)}
</div>
</div>
)
}
export default DealerCards
And this is the CSS I am using to try and hide it.
.dealer-cards:first-of-type {
display: none;
}
I also tried moving the dealer-cards className to the images parent div but got the same result.
What am I doing wrong??
Let me know if you need to see more of the code.
dealerCards.slice(1).map(...) will hide the first child.
You can update existing CSS style to like this,
.dealer-cards:nth-child(1) { display: none; }
I think this may help you.
Related
I have created a component which basically generates a card which includes card title,card description and a button. Now when I map through an array on a different component to generate those cards I want the button to be different on different components. Like on home page the button should say Update, on other page the button should say Delete. How can I acheive that? Here is the component which generates card.
import React from 'react';
import { Card } from 'react-bootstrap';
const InventoryItem = ({ product }) => {
const { productName, productImage, productPrice, productQuantity, productSupplier, productDetails } = product;
return (
<div className='col-12 col-md-6 col-lg-6'>
<Card className='h-100 items-card d-block d-md-block d-lg-flex flex-row align-items-center border border-0'>
<div className='text-center card-image-container'>
<Card.Img variant="top" src={productImage} className='card-image img-fluid' />
</div>
<Card.Body className='card-details'>
<Card.Title>{productName}</Card.Title>
<Card.Text>{productDetails}</Card.Text>
<div className='d-lg-flex align-items-center justify-content-between mb-3'>
<p className='mb-0'>Price: ${productPrice}</p>
<p className='me-2 mb-0'>Stock: {productQuantity}</p>
</div>
<div className='d-flex align-items-center justify-content-between'>
<p className='mb-0'>Supplier:{productSupplier}</p>
<button className='btn btn-dark'>Update</button>
</div>
</Card.Body>
</Card>
</div>
);
};
export default InventoryItem;
Pass the button text as a prop to the component, so consuming code can speficy the text for the button.
Add it as a prop:
const InventoryItem = ({ product, buttonText }) => {
And use it in the button:
<button className='btn btn-dark'>{buttonText}</button>
Then when using the component, pass the prop:
<InventoryItem product={someProductObject} buttonText="Update" />
or with a conditional value:
<InventoryItem product={someProductObject} buttonText={someCondition ? "Update" : "Delete"} />
You can define a condition for the button basaed on the page you are:
window.location.href return the string href.
const MyButton= window.location.href=='Home'
? <button> HOME</button>
: <button> UPDATE</button>
Hope that answer your question,
Mauro
I only want to show the display block on the hovered item. but when I hover it shows on every item in a map function. what I'm doing wrong.
basically, I just want to show hovered movie item's title. for now, it shows every movie when I hover.
MovieList.js
const [popular, setPopular] = useState([]);
const [hover, setHover] = useState(false);
return (
<>
<div className="movie-list">
<h2 style={{ fontSize: "49px", marginLeft: "60px" }}>What's Popular</h2>
<div className="popular">
{popular.map((pop, index) => (
<>
<div className="movie" key={index}>
<div className="tot" onMouseEnter={() => setHover(true)}>
<h4
id="pop-title"
style={{ display: hover ? "block" : "none" }}
key={index}
>
{pop.title}
</h4>
</div>
<img
src={"https://image.tmdb.org/t/p/w500" + pop.poster_path}
id="movie-img"
/>
</div>
</>
))}
</div>
</div>
</>
);
};
export default MovieList;
The same hover state variable is used for all your movies, so when it becomes true, all the movies are affected by the change. You could use something like an object instead of just a boolean to store one hover state per movie.
Another problem with your code that isn't helping:
You are missing a unique key prop on each item of the map (it must be on the direct child).
Solution 1: Remove the Fragment
Everything is already under one div so you don't need the React Fragment (<>) in that case. Also, you might wanna use something unique to the current map item other than the index in the array.
{popular.map((pop) => (
<div className="movie" key={pop.somethingUnique}>
<div className="tot" onMouseEnter={() => setHover(true)}>
<h4 id="pop-title" style={{ display: hover ? "block" : "none" }}>
{pop.title}
</h4>
</div>
<img
src={"https://image.tmdb.org/t/p/w500" + pop.poster_path}
id="movie-img"
/>
</div>
))}
Solution 2: Set the key on the Fragment
{popular.map((pop) => (
<Fragment key={pop.somethingUnique}>
<div className="movie">
<div className="tot" onMouseEnter={() => setHover(true)}>
<h4 id="pop-title" style={{ display: hover ? "block" : "none" }}>
{pop.title}
</h4>
</div>
<img
src={"https://image.tmdb.org/t/p/w500" + pop.poster_path}
id="movie-img"
/>
</div>
</Fragment>
))}
Here's a quick rundown of the relevant code before I ask this question
The HomePage component
const Home = () => {
return (
<div>
<div>
{questions.map((question) => (
<div key={question.id} className="mb-4">
<Question
title={question.title}
contentPreview={question.contentPreview}
/>
</div>
))}
</div>
<Card className="p-4">Side Controlls</Card>
</div>
);
};
The Question component
const Question = ({ title, contentPreview }) => (
<Card className="p-4 break-words">
<h1 className="mb-4 text-lg text-blue-600">{title}</h1>
<p className="text-gray-500">{contentPreview}</p>
<div className="flex mt-4 gap-4">
<InfoIcon
icon={<HeartIcon />}
info={20}
iconClassName="text-red-400 w-6 h-6"
infoClassName="text-gray-500"
/>
<InfoIcon
icon={<CommentIcon />}
info={40}
iconClassName="text-blue-400 w-6 h-6"
infoClassName="text-gray-500"
/>
</div>
</Card>
);
The Layout component that HomePage is being wrapped in
const Layout = ({ children }) => (
<div className="bg-gray-100">
<div className="flex flex-col min-h-screen">
<NavBar />
<div className="mt-4 max-w-7xl self-center w-full px-4">{children}</div>
</div>
</div>
);
And here are some screenshots of whats happening
A screenshot with the containing div of the HomePage Component having a background so you can see better where it is
https://gyazo.com/b8aa356912f973f854299c665c66de76
A screenshot with the div that containing all the questions colored is the reddish color
and the (soon to be) controls/sidebar colored in green
https://gyazo.com/2ceb6a1277f1de4506531a2bcf0b9b17
And finally, the real problem is this screenshot, because I want both the controls and List of questions to be side by side my first instinct is to give the containing div of both of them a class of "flex" but when I do that this happens
https://gyazo.com/af6206b95dc684bbcb316a8d33362b62
and the controls get push beyond the "limits" to the right. if anyone knows or has any ideas about why this might be happening please let me know. thank you
(PS. please do not answer and say "use bootstrap" or use "x ui framework instead" because I'm using tailwind and do want to stay in tailwind)
I want both the controls and List of questions to be side by side
In such case, use flex flex-1 on both the sections to have even width. Else, you can still specify a width like question section flex w-8/12 and the side controls section flex w-4/12.
I am trying to set a simple search operation in a user interface as shown below:
I have a total of 70 react-strap cards and each card contain a vessel with name, type and an image. I would like to search the name of the vessel and have the card related to that vessel to pop-up. All my images are currently contained inside the external database Contentful. Below the fields of interests:
The problem is that I don't know how to write a search function that locate a specific value of a list.
Below the code:
SideBar.js
import React from 'react';
import Client from '../Contentful';
import SearchVessel from '../components/SearchVessel';
class Sidebar extends React.Component {
state = {
ships: [],
};
async componentDidMount() {
let response = await Client.getEntries({
content_type: 'cards'
});
const ships = response.items.map((item) => {
const {
name,
slug,
type
} = item.fields;
return {
name,
slug,
type
};
});
this.setState({
ships
});
}
getFilteredShips = () => {
if (!this.props.activeShip) {
return this.state.ships;
}
let targetShip = this.state.ships.filter(
(ship) => this.props.activeShip.name === ship.name
);
let otherShipsArray = this.state.ships.filter((ship) => this.props.activeShip.name !== ship.name);
return targetShip.concat(otherShipsArray);
};
render() {
return (
<div className="map-sidebar">
{this.props.activeShipTypes}
<SearchVessel />
<pre>
{this.getFilteredShips().map((ship) => {
console.log(ship);
return (
<Card className="mb-2">
<CardImg />
<CardBody>
<div className="row">
<img
className="image-sizing-primary"
src={ship.companylogo.fields.file.url}
alt="shipImage"
/>
</div>
<div>
<img
className="image-sizing-secondary"
src={ship.images.fields.file.url}
alt="shipImage"
/>
</div>
<CardTitle>
<h3 className="thick">{ship.name}</h3>
</CardTitle>
<CardSubtitle>{ship.type}</CardSubtitle>
<CardText>
<br />
<h6>Project Details</h6>
<p>For a description of the project view the specification included</p>
</CardText>
<Row style={{ marginTop: '20px' }}>
<div className="buttoncontainer">
<div className="btn btn-cards">
<a
className="buttonLink"
download
href={ship.projectnotes.fields.file.url}
>
Project Notes
</a>
</div>
<div className="btn btn-cards">
<a className="buttonLink" href={ship.abstract.fields.file.url}>
Abstract
</a>
</div>
</div>
</Row>
</CardBody>
</Card>
);
})}
</pre>
</div>
);
}
}
export default Sidebar;
VesselSearch.js
import React, { Component } from 'react';
export default class SearchVessel extends Component {
render() {
const { value, handleSubmit, handleChange } = this.props;
return (
<React.Fragment>
<div className="container">
<div className="row">
<div className="col-10 mx-auto col-md-8 mt-5 text-center">
<h4 className="text-slanted text-capitalize">Search for Vessel</h4>
<form className="mt-4" onSubmit={handleSubmit}>
<label htmlFor="search" className="text-capitalize">
type vessel separated by comma
</label>
<div className="input-group">
<input
type="text"
name="search"
placeholder="Type name of vessel here"
className="form-control"
value={value}
onChange={handleChange}
/>
<div className="input-group-append">
<button type="submit" className="input-group-text bg-primary text-white">
<i className="fas fa-search" />
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</React.Fragment>
);
}
}
What I have done so far:
1) I tried different combination with the filter function and I think I am close. The problem is that when I operate the search nothing happens and in order to find the card of the vessel I want, I have to scroll down until I find it.
I am running out of ideas and if you see something I didn't catch point me in the right direction for solving this issue.
You're close! I would add a field to your state called 'searchText' and then create a method to filter based on that searchText state item.
getFilteredShips = () => this.state.ships.filter(s => s.name.includes(this.state.searchText)
Then just map over those values to render the cards that match the search text. The cards will update each time the searchText value updates.
this.getFilteredShips().map(ship => ..........
React is famous for re-usable component. You will have all the data of these vessels in an array. You will loop through the array and render the items with card component.And when you search for the specific card you want that vessel to pop out on top.
There are two ways to do it:
You have to run through the array, find the index of that vessel and do whatever it takes to manipulate your array and to make that item at top and re-render your list.
Alternatively render one more component on top of your vessel list as user clicks the search button. You just have to find the item index and render it. This way you don't have to deal with array manipulation. It doesn't matter if you have 80 or 1000 cards.
Please checkout official documentation for array methods, for array slicing and splice.
Hope this is what you are looking for. If you need further help, comment please.
I'm building a drupal based e-commerce site right now and got stuck. Still new to react and coding in general, but trying to learn. So I've got all my data pulled in, using redux and rest api, and I'm getting my products, variations and attributes. The product page is setting a specific product based on url, and now I need to be able to select the different attributes via a dropdown menu. Currently I have a place holder dropdown that matches the one shown in react-bootstrap documentation. However, I need to be placing options in that dropdown based off of my array holding the attributes.
I'm sure it's simple but I've been searching around and haven't found an answer yet that works. Hopefully you guys can help.
As you look through the code, keep in mind that sizes = [] is the array I'm looking to place data from as the selectable options in the dropdown.
Here's the product page:
import React, { Component} from 'react';
import '../../css/Home.css';
import MenuBar from "../sub-components/MenuBar";
import LeftMenuBar from "../sub-components/LeftMenuBar";
import "../../css/ProductPage.css"
import WomensWear from "../../media/WomensWear.jpg"
import {
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem } from 'reactstrap';
class ProductPage extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: false
};
}
toggle() {
this.setState(prevState => ({
dropdownOpen: !prevState.dropdownOpen
}));
}
getProduct() {
let product = null;
let sizes = [];
if (this.props.products && this.props.products.items.length) {
product = this.props.products.items.find(o => o.path[0].alias === this.props.router.match.url);
if (product && this.props.variations && this.props.attributes) {
product.something = [];
for (let i = 0; i < product.variations.length; i++) {
let varid = product.variations[i].target_id;
let variation = this.props.variations.items.find(o => o.variation_id[0].value === varid);
variation.size = this.props.attributes.items.find(o => o.attribute_value_id[0].value === variation.attribute_size[0].target_id);
sizes.push({value: variation.size.attribute_value_id[0].value, name: variation.size.name[0].value});
product.something.push(variation);
console.log(sizes);
}
}
}
return product;
}
render() {
let style = {
height: this.props.height - 56,
};
let product = this.getProduct();
let body = product && product.body.length ? product.body[0].value : null;
return (
<div className="App" id="default">
<div className='MenuBar'>
<MenuBar/>
</div>
<div>
<div style={style} className="ProductPage row no-gutters">
<div className="col-xs-3 col-md-3">
<LeftMenuBar/>
</div>
<div className="outer col-xs-4 col-md-4">
<div>
<div id="ProductPlacement">
<img src={WomensWear} alt=""/>
<div id="alternate-pics">
<div id="alt-pic">
</div>
<div id="alt-pic">
</div>
<div id="alt-pic">
</div>
</div>
</div>
</div>
</div>
<div className="col-xs-5 col-md-5">
<div id="ImagePlacement">
<div className="ProductTitle">
<h1>First Product</h1>
</div>
<hr/>
<div className="ProductDescription">
<div dangerouslySetInnerHTML={{__html: body}} />
</div>
<div id="options">
<div id="color">
</div>
<div id="color2">
</div>
<div id="color3">
</div>
</div>
<div id="options">
<div>
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret id="size-dropdown">
Size
</DropdownToggle>
<DropdownMenu>
<DropdownItem>1</DropdownItem>
<DropdownItem>3</DropdownItem>
<DropdownItem>5</DropdownItem>
</DropdownMenu>
</Dropdown>
<div className="AddToCart">
<button className="AddToCart">Add To Cart</button>
<button className="Price">$34.99</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default ProductPage;
Neat thing about React is that you can use regular JS.
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret id="size-dropdown">
Size
</DropdownToggle>
<DropdownMenu>
{sizes.map(size => (
<DropdownItem>{size}</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
Sidenote: select seems to be more suitable element for this but that wasn't your question.