I am using react slick for making slides of poll. I am facing issue while clicking the poll option. Click gets fired after two clicks.
I think touch start is the issue here.
Not sure if it's like your code but the console logs the text when I click on the first image:
const ReactSlick = (props) => {
var settings = {
dots: true
};
return (
<div className="container">
<Slider {...settings}>
<div>
<img onClick={() => console.log("Clicked !")} src="http://placekitten.com/g/400/200" />
</div>
<div>
<img src="http://placekitten.com/g/400/200" />
</div>
</Slider>
</div>
);
}
```;
Related
I'm trying to make a preview for a pdf file for items in my database that have a pdf file attached to them. Right now, I'm trying to use React's pdf module but can't seem to get it to work. I'm unsure why it's working and would like to know how to make it work right now. What I want is when you click the button Preview, I want it to go to open up a separate page with the pdf there. My end goal is to have a mini viewer, so once you click the button, a mini viewer that takes up roughly 1/3 of the screen pops up in the middle where you can scroll and view the pdf.
I would appreciate it if I could have some help in terms of reaching these goals of mine.
Here's my code:
import "../styles/ProjectDetails.css";
import React, { useState } from 'react'
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'
function PdfViewer() {
const [numPage, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
function onDocumentLoadSuccess({numPages}) {
setNumPages(numPage);
setPageNumber(1);
}
return (
<div>
<header>
<Document file="../pdfs/Mini_Case_Study_15.pdf" onLoadSuccess={onDocumentLoadSuccess}>
<Page height="600" pageNumber={pageNumber}></Page>
</Document>
</header>
</div>
)
}
const ProjectDetails = ({ project }) => {
return (
<div className="card-grid">
<div className="card">
<div className="card-header card-image">
<img src="https://c4.wallpaperflare.com/wallpaper/672/357/220/road-background-color-hd-wallpaper-thumb.jpg"/>
</div>
<div className="card-title"><strong>{project.sdg}</strong></div>
<div className="card-body">
<strong>Goal:</strong> {project.goal}
</div>
<div className="card-themes">
<strong>Themes:</strong> {project.theme.map((theme)=>{return theme + ', '})}
</div>
<div className="card-assignment">
<strong>Assignment Type:</strong> {project.assignment_type}
</div>
<div className="card-footer">
<button className="btn">Details</button>
{project.assignment_type === 'Mini Case Studies' &&
<>
<button className="btn btn-outline">Download</button>
<button onClick={PdfViewer} className="btn">Preview</button>
</>
}
{project.assignment_type !== 'Mini Case Studies' &&
<button className="btn btn-outline" onClick={function(event){ navigator.clipboard.writeText(project.goal); alert('Text copied to clipboard!') }}
>
Copy to Clipboard
</button>
}
</div>
</div>
</div>
)
}
export default ProjectDetails
TLDR: Cannot figure out why component is still being rendered while no props are passed.
So I have been building a NextJS application, and I have this banner component that is shown on every page of my website. It has some header text, buttons and an image:
const Banner = (props) => {
return (
<div className={bannerStyles.wrapper}>
<div className={classnames(bannerStyles.banner, "wrap", "center")}>
<div className={bannerStyles.banner_left}>
<h1>{props.header}</h1>
<div className={bannerStyles.button_wrapper}>
<div className={bannerStyles.button}>
<Button>{props.button || null}</Button>
</div>
<div className={bannerStyles.button}>
<Button>{props.scnd_button || null}</Button>
</div>
</div>
</div>
<div className={bannerStyles.banner_right}>
<Image src={props.image} alt=""></Image>
</div>
</div>
</div>
);
};
Inside of this, as you can see I have two Button components (The MDEast thing is an arrow icon):
const Button = ({children}) => {
return (
<div className={buttonStyles.button}>
<Link href="/"><a>{children} <MdEast /></a></Link>
</div>
)
}
Now I want the option that if no prop is passed, that the Button component(s) do(es) not render/ is hidden from the page, so that it is optional per page. Yet the Button does still render, even though I am not passing any props on my About page. My about page:
const About = () => {
return (
<>
<Banner
header="Hello this is my code"
image={banner_placeholder}
/>
</>
)
}
PS. I am fairly new to React and NextJS, so this might be a beginner mistake, or I am not understanding the fundamentals well enough, but could someone point me in the right direction please?
To conditionally render the button you can use:
props.button && <Button>{props.button}</Button>
When props.button is falsy, then button will not get rendered.
GOAL: When I click the back button in the browser, I want the previous page to load.
Currently, when I click the back button in my ProductDetailsPage.js file, my app reverts to localhost:3000 without a forward slash.
How can I ensure when I click the back button in the browser that my app will load localhost:3000/ with a forward /
Here is the code for the page I'm clicking back from:
const addToBasket = () => {
// dispatch item into data layer
dispatch({
type: "ADD_TO_BASKET",
item: {
name: product.name,
brand: product.brand,
image: product.image,
price: product.price,
},
});
};
return (
<div>
<img src={product.image} />
<h3>{product.brand}</h3>
<h1>{product.name}</h1>
<p>${product.price}</p>
<button onClick={addToBasket}>Add to Cart</button>
</div>
);
}
My app should revert to the page Feed.js with following code:
return (
<div className="feed">
<div className="feed__cards">
{products.map((product) => (
<ProductCard
image={product.image}
brand={product.brand}
name={product.name}
price={product.price}
id={product.id}
/>
))}
</div>
</div>
);
}
Any help would be appreciated.
Look likes it's working now. I reset my server and worked like a charm.
I'm importing:
import Collapse from "react-bootstrap/es/Collapse";
So i'm trying to get my collapse to work in my project here is from the render:
<div className="card-header" >
<a className="card-link" href='#compSci' onClick={this.toggleCollapse}>
Computer Sciences
</a>
</div>
<Collapse id="collapse1" isOpen = {this.state.collapse1}>
<div className="card-body">
<div className="row">
{
computerScience.map(skill => (
<div className="col">
<SkillPopover skill={skill} />
</div>
))
}
</div>
</div>
</Collapse>
With a toggle collapse function which changes the values from true to false
toggleCollapse = () => {
this.setState({ collapse1: !this.state.collapse1 });
console.log(this.state.collapse1)
}
I'm not quite sure what is going on with this as checking with the debugger it clearly changes the values of the state value collapse 1 between the true and false but it refused to open the Collapse. Any help would be greatly appreciated.
EDIT I'm following a guide here: https://reactstrap.github.io/components/collapse/
So my difficulty was that I failed to import the correct bootstrap. This is a reactstrap component and not a react-bootstrap component.
I am creating an image with areamaps to make each one clickable. Here is the code to render my imagemap:
render() {
var areas = this.renderArea();
return (
<div>
<div>
<canvas ref="canvas" ></canvas>
<img ref="image" src={this.props.source} alt="Missing" useMap="woody" />
</div>
<map ref="map" name="#woody">
{areas}
</map>
</div>
)
}
renderArea() {
return this.state.mapping.map((area, i) => {
return <area shape="poly" coords={area} href="" alt="" title="" onMouseOver={this.mouseOver} onMouseOut={this.mouseOut} onClick={this.onClick}/>
});
}
On desktop, when I hover over the areamap, everything works like it should. When I look at it on my iPhone, I can't click on the areas. I found this StackOverflow, but when I added cursor: pointer it didn't work. I tried adding to the area, img and canvas, together and separately, but it still didn't work. It is like the SO post said and the onClick is not registering. What else do I do?