Develop Reference

onClick function won't fire for mapped component

Here is the relevant code:
const Members = () => {
// array of each video in selected grade
const videosMap = (videos) => {
return videos.map((video) => (
<VideoCard
key={video.id}
thumbnail={video.thumbnail}
title={video.title}
description={video.description}
onClick={() => {
handleVideoClick();
}}
/>
));
};
// updates state of shown videos & page heading
const handleGradeButtonClick = (videos, heading) => {
setShowVideos(videosMap(videos));
setVideosHeading(heading);
};
const handleVideoClick = () => {
console.log("test");
};
// controls state of which grade's videos to show
const [showVideos, setShowVideos] = useState(videosMap(kinder_videos));
// controls states heading to display depending on selected grade
const [videosHeading, setVideosHeading] = useState("Kindergarten");
const [showVideoDetails, setShowVideoDetails] = useState(null);
The handleVideoClick is the function that is not working when I click on one of the mapped VideoCard components.
Here is the full code if you want to see that:
https://github.com/dblinkhorn/steam-lab/blob/main/src/components/pages/Members.js
When I look in React DevTools at one of the VideoCard components, it shows the following:
onClick: *f* onClick() {}
If I don't wrap it in an arrow function it does execute, but on component load instead of on click. I have a feeling it has something to do with my use of .map to render this component, but haven't been able to figure it out.
Thanks for any help!

There's no problem with your mapping method, you just need to pass the onClick method as a prop to your VideoCard component :
On your VideoCard component do this :
const VideoCard = (props) => {
const { thumbnail, description, title, onClick } = props;
return (
<div className="video-card__container" onClick={onClick}>
<div className="video-card__thumbnail">
<img src={thumbnail} />
</div>
<div className="video-card__description">
<div className="video-card__title">
<h3>{title}</h3>
</div>
<div className="video-card__text">{description}</div>
</div>
</div>
);
};
export default VideoCard;

React way of grabbing a button element and using disable property

I have the following code where a user can select a file and hit upload and the Choose button is disabled.
Code Sanbox link is here:
import "primeicons/primeicons.css";
import "primereact/resources/themes/lara-light-indigo/theme.css";
import "primereact/resources/primereact.css";
import "primeflex/primeflex.css";
import "../../index.css";
import ReactDOM from "react-dom";
import React, { useRef, useState } from "react";
import { FileUpload } from "primereact/fileupload";
export const FileUploadDemo = () => {
const toast = useRef(null);
const [disableButton, setDisableButton] = useState(false);
const onUpload = () => {
toast.current.show({
severity: "info",
summary: "Success",
detail: "File Uploaded"
});
};
const onTemplateAdvancedSelect = (e) => {
console.log("Printing onTemplateAdvancedSelect ");
console.log(e);
let inputFileType = document.querySelector("input[type=file]");
//setDisableButton(true);
inputFileType.classList.add("toDisableOnSelect");
inputFileType.disabled = true;
let htmlCollection = document.getElementsByClassName(
"p-button p-component p-button-icon-only"
);
console.log("Printing htmlCollection");
console.log(htmlCollection.length);
console.log(htmlCollection);
// htmlCollection.addEventListener("click", function () {
// inputFileType.disabled = false;
// });
//console.log(htmlCollection.item(19));
};
return (
<div>
<div className="card">
<h5>Advanced</h5>
<FileUpload
multiple={false}
name="demo[]"
url="https://primefaces.org/primereact/showcase/upload.php"
onUpload={onUpload}
id={"myId"}
accept="image/*"
maxFileSize={1000000}
onSelect={onTemplateAdvancedSelect}
disabled={disableButton}
emptyTemplate={
<p className="p-m-0">Drag and drop files to here to upload.</p>
}
/>
</div>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<FileUploadDemo />, rootElement);
So Inside onTemplateAdvancedSelect function, I want to set inputFileType.disabled to false once user hits the cross icon as shown below:
I don't want to use getElementByClassName just like I have attempted to use in my code of above function. What would be a better way to achieve my goal?
Primereact version I'm using : 4.2.2

One solution is customizing the row item of the selected file.
so the itemTemplate prop is exactly for that goal.
export const FileUploadDemo = () => {
const toast = useRef(null);
const fileUploadRef = useRef(null) // reference to uploader node
const [disableButton, setDisableButton] = useState(false);
const onTemplateRemove = (file, callback) => {
// setTotalSize(totalSize - file.size);
const domInput = fileUploadRef.current.fileInput;
domInput.disabled = false;
callback();
}
const onTemplateAdvancedSelect = () => {
const domInput = fileUploadRef.current.fileInput; // pure dome element
domInput.disabled = true;
}
const itemTemplate = (file, props) => {
return (
<>
<div>
<img alt={file.name} role="presentation" src={file.src} width="50" />
</div>
<div class="p-fileupload-filename">{file.name}</div>
<div>{file.size}</div>
<div>
{ /* here you have access to that button */}
<button
type="button"
class="p-button p-component p-button-icon-only"
onClick={() => onTemplateRemove(file, props.onRemove)}>
<span class="p-button-icon p-c pi pi-times"></span>
<span class="p-button-label p-c"> </span>
</button>
</div>
</>
)
}
return (
<div>
<div className="card">
<h5>Advanced</h5>
<FileUpload
ref={fileUploadRef} // pass a reference for `input` manipulation
multiple={false}
name="demo[]"
url="https://primefaces.org/primereact/showcase/upload.php"
onUpload={onUpload}
id={"myId"}
accept="image/*"
maxFileSize={1000000}
/* here we should pass the customized template as prop */
itemTemplate={itemTemplate}
onSelect={onTemplateAdvancedSelect}
disabled={disableButton}
emptyTemplate={
<p className="p-m-0">Drag and drop files to here to upload.</p>
}
/>
</div>
</div>
);

Please use useRef hook provided by react. Example below:
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}

I'm trying to understand your use case. Do you want to remove the image from the upload stack by clicking the x button?
I think you should rather use the built-in API to trigger functionality. If that doesn't help you can extend the library.

You don't need to do a getElementsByClassName. You can use the onRemove event to handle the file remove event.
<FileUpload
multiple={false}
name="demo[]"
url="https://primefaces.org/primereact/showcase/upload.php"
onUpload={onUpload}
id={"myId"}
accept="image/*"
maxFileSize={1000000}
onSelect={onTemplateAdvancedSelect}
disabled={disableButton}
emptyTemplate={
<p className="p-m-0">Drag and drop files to here to upload.</p>
}
onRemove={(e, file) => setDisableButton(false)}
/>

Fetch Data from Strapi CMS to Next(React.js) Frontend doesn't work

I'm currently working on a website using Strapi as a CMS and Next.js(React) in Frontend. The site also has an image slider which obviousely contains an image, a headline and a description. These three things I now want to get from my Strapi Collection Type called Banner (Banners). I've tried so many times and read through every forum I could find, but it somehow still doesn't work.
There's no error, but the data I want to display doesn't show up on the website. The following code is the one from \frontend\components\image-slider.js:
import React from "react";
const Slider = ({}) => {
const [banners, setBanners] = React.useState(null);
const getBanners = async() => {
const res = await fetch("http://localhost:1337/banners");
const json = await res.json();
setBanners(json);
}
if(!banners){
getBanners();
}
if (typeof window !== 'undefined') {
// Code for making slider work
}
return (
<div className="img-slider">
<div className="slide active">
<div className="info">
<div>
{banners ? banners.map((banner) => (
<div key={banner.id}>
<h2>{banner.title}</h2>
</div>
)) : (
<div>Loading...</div>
)}
</div>
<p>
{banners ? banners.map((banner) => (
<div key={banner.id}>
<h2>{banner.description}</h2>
</div>
)) : (
<div>Loading...</div>
)}
</p>
{/* <Image></Image>This I haven't tried yet. */}
</div>
</div>
<div className="slide">
{/* Same code as div before */}
</div>
{/* further slides */}
<div className="navigation">
<div className="btn-navig active"></div>
<div className="btn-navig"></div>
<div className="btn-navig"></div>
</div>
</div>
)
}
export default Slider;
The type of how I currently try to get the data is from this StackOverflow answer.
I hope someone is able to help me! Thanks a lot!

You have to put your API request (getBanners) in useEffect hook with [] as a dependencies (run only once - on load) like so:
React.useEffect(() => {
const getBanners = async() => {
const res = await fetch("http://localhost:1337/banners");
const json = await res.json();
setBanners(json);
}
getBanners();
}, [])

React.js passing down image link not working

As indicated, I was trying to pass down an image link from the internet.
When I do this, the code does not give an error, but fails to load the image:
Parent component:
function App() {
return (
<div className="App">
<Header imgLink="https://i.ibb.co/Q6q5F3x/profile.png" />
</div>
);
}
Child component:
const Header = (imgLink) => {
return(
<div className="header">
<img className="profile-pic" src={imgLink} alt="Profile Pic"/>
</div>
);
}
When I simply use the image link as the img src without it being passed down from the parent component, it would work; but I would still like it to be passed down from the parent.
Any insight will help! Thanks

You need to destruct params in Header component.
const Header = ({imgLink}) =>
else it's just an props object:
const Header = (props) => {console.log(props.imgLink)}

Displaying images from fetch API call Node/React

Im trying display images im fetching from API
btw url is defined
fetch(url).then((res) => {
res.blob()
.then((img) => {
console.log(img)
const objectURL = URL.createObjectURL(img);
const url = objectURL.replace(/[blob:]{5}/gi,'')
ReactDOM.render(<Gallery photos={url} />, document.getElementById('root'));
});
})
Gallery.js
import React, { Component } from 'react';
class Gallery extends Component {
constructor (props) {
super(props);
this.state = {
Images: []
}
}
componentDidMount () {
this.setState({images: this.props.photos});
}
render() {
const {image} = this.props.photos;
return (
<div >
<img
className="App"
width="300"
height="300"
src={image}
alt="dogs"/>
</div>
);
}
}
export default Gallery;
with or without the regex /[blob:]{5}/gi it is only displaying the alt prop and not the image. The image is received and the get call is successful but the objectURL url is not working. Any help?

const {image} = this.props.photos; is equivalent to
const image = this.props.photos.image;
It means, "assign the property image of this.props.photos to the variable image".
However, this.props.photos is a string. Strings don't have a image property. You simply want
const image = this.props.photos;
You are not doing anything with this.state.Images, so you can remove the constructor and componentDidMount.
/[blob:]{5}/gi doesn't do what you want it to do. It means "match all sequences of 5 characters that consist of b, l, o or :"
I.e. the character sequence bb:ol would match.
If you wanted to remove the sequence blob: at the beginning of the string, then you should be using /^blob:/i instead.
However, you shouldn't remove blob: from the URL.
Complete and simplified example
import React, { Component } from 'react';
function Gallery(props) {
return (
<div >
<img
className="App"
width="300"
height="300"
src={props.image}
alt="dogs"
/>
</div>
);
}
fetch(url)
.then(res => res.blob())
.then(img => {
ReactDOM.render(
<Gallery image={URL.createObjectURL(img)} />,
document.getElementById('root'),
);
})