Hi I deployed a new react app to ghpages. One of the pages has a Tab Container with 3 Nav Items that serve as a link. The first tab which auto loads with the page shows all the images correctly. The second and third tab do not show the pages. These images are rendered properly when I run it locally. They are all coded the same way. Anyone know how to solve this?
Link to ghpages https://johntrieseverything.github.io/starcraft2-unit-counter/
The error occurs under the "Units List" section when selecting the second or third tab.
Here is what my code looks like:
<Tab.Container defaultActiveKey="Protoss" >
<Container fluid className='unitListDisplayBackground'>\
<Row style={{ height: '10vh' }}></Row>
<Row className='mt-5'>
<h1>Units List</h1>
<p>This is a page where you can view all playable units and see their stats</p>
</Row>
<Row>
<Nav fill variant='tabs' defaultActiveKey="/home">
<Nav.Item >
<Nav.Link
style={{ backgroundColor: '#393e46', color: '#ADD8E6', marginBottom: '1vh' }}
eventKey="Protoss">
<img
src={process.env.PUBLIC_URL + "/assets/Icons/Protoss Icon.png"}
alt='Protoss Icon'
style={{ width: '50px', height: '50px' }}
/></Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
style={{ backgroundColor: '#393e46', color: '#ADD8E6', marginBottom: '1vh' }}
eventKey="Zerg">
<img
src={process.env.PUBLIC_URL + "/assets/Icons/Zerg Icon.png"}
alt='Zerg Icon'
style={{ width: '65px', height: '50px' }}
/>
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
style={{ backgroundColor: '#393e46', color: '#ADD8E6', marginBottom: '1vh' }}
eventKey="Terran">
<img
src={process.env.PUBLIC_URL + "/assets/Icons/Terran Icon.png"}
alt='Terran Icon'
style={{ width: '50px', height: '50px' }}
/>
</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content>
<Tab.Pane eventKey="Protoss" style={{ textAlign: 'center' }}>
{/* Display the Protoss Units */}
<ProtossUnits />
</Tab.Pane>
<Tab.Pane eventKey="Zerg" style={{ textAlign: 'center' }}>
{/* Display the Zerg Units */}
<ZergUnits />
</Tab.Pane>
<Tab.Pane eventKey="Terran" style={{ textAlign: 'center' }}>
{/* First 3 Terran units */}
<TerranUnits />
</Tab.Pane>
</Tab.Content>
</Row>
</Container>
</Tab.Container>
Another issue I'm having is the 404 error on page refresh. I read that the Hashbrowser is a quick work around but the react router doc says its not recommended. What are some other potential solutions?
Code for routing:
class App extends Component {
render() {
return (
<div>
<BrowserRouter basename="starcraft2-unit-counter">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/UnitsList" element={<UnitsList />} />
<Route path="/UnitCountersPage" element={<UnitCountersPage />} />
<Route path="/ArmyCounterPage" element={<ArmyCounterPage />} />
</Routes>
</BrowserRouter>
</div>
)
}
}
Thank you!
Tried looking online for similar problems but couldn't find one..
I'm trying to create a swipeableDrawer like that.
I want a button on my swipeableDrawer which I could click to dispatch an action.
But I can't click the button and swipe the swipeable drawer at the same time.
I want it.
<Global styles={{
'#swipeable .MuiPaper-root': {
height: `calc(78% - ${drawerBleeding}px)`,
overflow: 'visible',
},
}}/>
<SwipeableDrawer
id={'swipeable'}
anchor="bottom"
open={open}
onClose={toggleDrawer(false)}
onOpen={toggleDrawer(true)}
swipeAreaWidth={100}
disableSwipeToOpen={false}
ModalProps={{
keepMounted: true,
}}>
<>
<Card>
<CardContent>
<div className="row">
<div className="col-12">
{!ricalcolaPremioBTNEnabled ?
<Button className={buttonClasses.root}
onClick={() => history.push(INFO_PERSONALI_PATH)}>CONTINUA</Button> :
<Button className={buttonClasses.root}
disabled={!ricalcolaPremioBTNEnabled}
onClick={handleRicalcolaPremio}>RICALCOLA</Button>}
</div>
</div>
</CardContent>
</Card>
</>
<div style={{height: '100%', marginTop: '3vw', overflowY: 'auto', overflowX: 'hidden'}}>
<div className="row p-3">
Content of swipeable drawer
</div>
</div>
</SwipeableDrawer>
</Global>
How can I fix it?
Your button just probably inherits the pointer-events: none CSS from the <SwipeableDrawer/>.
You can override this CSS but you may encounter this issue
The JSON data.js file
export const paintData = [
{
paint: [
{
name: "Weathered Moss N380-3",
lrv: "LRV:49 R:186 G:187 B:179",
rgb: "186, 187, 179",
url: "https://www.behr.com/consumer/ColorDetailView/N380-3",
},
{
name: "Jungle Camouflage N350-4",
lrv: "LRV:38 R:170 G:167 B:148",
rgb: "170, 167, 148",
url: "https://www.behr.com/consumer/ColorDetailView/N350-4/",
},
],
trim: [
{
name: "White 52",
lrv: "LRV:83 R:235 G:235 B:230",
rgb: "235, 235, 230",
url: "https://www.behr.com/consumer/ColorDetailView/52/",
},
{
name: "Authentic Tan N290-2",
lrv: "LRV:73 R:234 G:221 B:198",
rgb: "234, 221, 198",
url: "https://www.behr.com/consumer/ColorDetailView/N290-2/",
},
],
accent: [
{
name: "English Custard M290-5",
lrv: "LRV:51 R:226 G:182 B:108",
rgb: "226, 182, 108",
url: "https://www.behr.com/consumer/ColorDetailView/M290-5/",
},
{
name: "Summerwood S290-4",
lrv: "LRV:48 R:212 G:178 B:139",
rgb: "212, 178, 139",
url: "https://www.behr.com/consumer/ColorDetailView/S290-4/",
},
],
}
]
this is the Paint.js file
import React, { Component } from "react";
import { Container, Col, Row } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import { paintData } from "./data";
export default class Paint extends Component {
render() {
return (
<Container className="mb-5">
<div>
<p className="font-weight-bold">Approval Exterior Paint Color</p>
<hr className="my-4" />
<p className="font-italic">
What are the approved exterior paint colors?
</p>
<p className="text-center lead">
<strong>
No Reds, Dark Blue or Soft Boiled P270-6 for base colors.
</strong>
</p>
<p className="text-center">
Colors may appear different based on your electronic resolution and
settings. Color codes are the same as retrieved from Behr’s website.
</p>
<br />
</div>
<Row>
{paintData.map((data) => {
return (
<Col>
<div
style={{
background: `rgb(${data.paint.rgb})`,
paddintTop: "10px",
paddingBottom: "10px",
}}
>
<p>Paint</p>
<p>{data.paint.name}</p>
<p>{data.paint.lrv}</p>
<a href={data.paint.url} target="_blank">
Link
</a>
</div>
<div
style={{
background: `rgb(${data.trim.rgb})`,
paddintTop: "10px",
paddingBottom: "10px",
}}
>
<p>Trim</p>
<p>{data.trim.name}</p>
<p>{data.trim.lrv}</p>
<a href={data.trim.url} target="_blank">
Link
</a>
</div>
<div
style={{
background: `rgb(${data.accent.rgb})`,
paddintTop: "10px",
paddingBottom: "10px",
}}
>
<p>Trim</p>
<p>{data.accent.name}</p>
<p>{data.accent.lrv}</p>
<a href={data.accent.url} target="_blank">
Link
</a>
</div>
</Col>
);
})}
</Row>
</Container>
);
}
}
Image:
I am trying to map three different arrays separately, along with some sub-arrays. The top js file is my JSON file, and the bottom is my Paint.js file. I have an issue mapping out the JSON. How do I map the arrays properly to allow three different categories? The idea is to have 3 paint colors overlap each other for the HOA community. Any help would be great, and thank you in advance.
just taking your paint section
Instead of
<div
style={{
background: `rgb(${data.paint.rgb})`,
paddintTop: "10px",
paddingBottom: "10px",
}}
>
<p>Paint</p>
<p>{data.paint.name}</p>
<p>{data.paint.lrv}</p>
<a href={data.paint.url} target="_blank">
Link
</a>
</div>
Try this( I didn't test this code, but should work)
{data.paint.map((paintItem)=> {
return (
<div
style={{
background: `rgb(${paintItem.rgb})`,
paddintTop: "10px",
paddingBottom: "10px",
}}
>
<p>Paint</p>
<p>{paintItem.name}</p>
<p>{paintItem.lrv}</p>
<a href={paintItem.url} target="_blank">
Link
</a>
</div>
)
})
}
You were not seeing the data because this code <p{data.paint.name}</p> is actually trying to access data.paint which is an array.
You will need to update the other sections as well, where you use trim and accent
Also Tip: would be easier to read and manage if you separate this code into diff components.
You can only iterate over arrays, not objects.
This must be iteration part you are looking for.
{
paintData.paint.map( (paint, index) => (
<Col>
<div
style={{
background: `rgb(${paint.rgb})`,
paddintTop: "10px",
paddingBottom: "10px",
}}
>
<p>Paint</p>
<p>{paint.name}</p>
<p>{paint.lrv}</p>
<a href={paint.url} target="_blank">
Link
</a>
</div>
<div
style={{
background: `rgb(${paintData.trim[index].rgb})`,
paddintTop: "10px",
paddingBottom: "10px",
}}
>
<p>Trim</p>
<p>{paintData.trim[index].name}</p>
<p>{paintData.trim[index].lrv}</p>
<a href={paintData.trim[index].url} target="_blank">
Link
</a>
</div>
<div
style={{
background: `rgb(${paintData.accent[index].rgb})`,
paddintTop: "10px",
paddingBottom: "10px",
}}
>
<p>Trim</p>
<p>{paintData.accent[index].name}</p>
<p>{paintData.accent[index].lrv}</p>
<a href={paintData.accent[index].url} target="_blank">
Link
</a>
</div>
</Col>
))
}
Thank you everyone for your replies, I was able to solve the problems in a different route.
import React, { Component } from "react";
import { Container, Col, Row } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import { paintData } from "../data/paintData";
import { trimData } from "../data/trimData";
import { accentData } from "../data/accentData";
export default class Paint extends Component {
render() {
return (
<Container className="mb-5">
<div>
<p className="font-weight-bold">Approval Exterior Paint Color</p>
<hr className="my-4" />
<p className="font-italic">
What are the approved exterior paint colors?
</p>
<p className="text-center lead">
<strong>
No Reds, Dark Blue or Soft Boiled P270-6 for base colors.
</strong>
</p>
<p className="text-center">
Colors may appear different based on your electronic resolution and
settings. Color codes are the same as retrieved from Behr’s website.
</p>
<br />
</div>
<Row>
<Col>
{paintData.map((data) => {
return (
<div
style={{
background: `rgb(${data.rgb})`,
paddingTop: "10px",
paddingBottom: "10px",
}}
>
<p>Paint</p>
<p>{data.name}</p>
<p>{data.lrv}</p>
<a href={data.url} target="_blank">
Link to {data.name}
</a>
</div>
);
})}
</Col>
<Col>
{trimData.map((data) => {
return (
<div
style={{
background: `rgb(${data.rgb})`,
paddingTop: "10px",
paddingBottom: "10px",
}}
>
<p>Trim</p>
<p>{data.name}</p>
<p>{data.lrv}</p>
<a href={data.url} target="_blank">
Link to {data.name}
</a>
</div>
);
})}
</Col>
<Col>
{accentData.map((data) => {
return (
<div
style={{
background: `rgb(${data.rgb})`,
paddingTop: "10px",
paddingBottom: "10px",
}}
>
<p>Accent</p>
<p>{data.name}</p>
<p>{data.lrv}</p>
<a href={data.url} target="_blank">
Link to {data.name}
</a>
</div>
);
})}
</Col>
</Row>
</Container>
);
}
}
Everyone's posts have given me ideas on how to fix the problem that I have been facing. Thank you.
How I can do something like planet on this link with help ScrollMagic in React?
My code
<div className={styles.containerMain}>
<div>
<Controller>
<Scene duration={300} triggerElement="#first-container" offset={500}>
{(progress) => (
<Tween
from={{
css: {
top: '0',
},
ease: 'Circ.easeOutExpo',
}}
to={{
css: {
top: '-500px',
},
ease: 'Circ.easeOutExpo',
}}
totalProgress={progress}
paused
>
<div id="first-container" style={{ height: '100vh', position: 'relative' }}>
<div className={styles.container}>
<div className={styles.contentContainer}>
<div className={styles.textSmall}>We</div>
<div className={styles.textLarge}>Deliver</div>
<div className={styles.containerText}>
<div className={styles.textSmall}>Quality</div>
<div className={styles.textSmall}>Software </div>
</div>
<div className={styles.textLarge}>Globally</div>
<div className={styles.globe}>
<Globe /> //this is image svg
</div>
</div>
</div>
</div>
</Tween>
)}
</Scene>
</Controller>
</div>
</div>
I need:
I see part of my image and than I am scrolling and I see full of my image (image replace text), than do something like in link
import { Card } from 'antd';
const { Meta } = Card;
ReactDOM.render(
<Card
hoverable
style={{ width: 240 }}
cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
>
<Meta
title="Europe Street beat"
description="www.instagram.com"
/>
</Card>
, mountNode);
From AntDesign's example, in the Card's Meta section, is there a way I would be able to add more description to the card like "price" or "author" and display it?
Unfortunately, Meta supports only fixed properties like title and description. https://ant.design/components/card/#Card.Meta
But if you want to add extra fields to the card, you can just add them to the Card html as children:
<Card
hoverable
style={{ width: 240 }}
cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
>
<Meta
title="Europe Street beat"
description="www.instagram.com"
/>
<div className="additional">
<p className="price">Price: 20$</p>
<p>Author: John Doe</p>
</div>
</Card>
See Codepen Demo.
it can be done like this
const { Card } = antd;
const { Meta } = Card;
ReactDOM.render(
<Card
hoverable
style={{ width: 240 }}
cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
>
<Meta
title="Europe Street beat"
description={[
<div>
<p>"www.instagram.com"</p>
<p> additional content</p>
</div>
]}
/>
<div className="additional">
<p className="price">Price: <span className="quantity">20$</span></p>
<p>Author: <span className="quantity">John Doe</span></p>
</div>
</Card>
, mountNode);
Meta supports only fixed properties like title and description. But If you want to add more details to your Card you can do it with help of description prop which supports by Meta.
You just need to write code as you do in JSX.
<Card hoverable style={{ width: 300, marginTop: 16 }}>
<Meta
description={ //Add your specific data here in description
<>
<div className="subject-card_extra-content">
<img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" style={{width:20}}/>
<span>Data</span>
</div>
<div className="dashboard-subject_inline-actions">
<Icon type="video-camera" />
<p>
Total Videos :<span> {5} </span>
</p>
</div>
<Button htmlType="submit" icon="play-circle" className="custom-default-fill-btn">
Continue Learning
</Button>
<Button htmlType="submit" icon="play-circle" className="custom-default-fill-btn">
No Progress
</Button>
</>
}
/>
</Card>