this is the dynamic url
../Assets/${product.code}/${image1}.png
Some product have images and some does not have one. Therefore if the URL is not valid, I want to return different JSX element. Is there any way to check the validity of the image URL path ?
You can do by try/catch if an error then returns a different JSX element.
setProductImageSrc() {
try{
const src = require(`../Assets/${product.code}/${image1}.png`)
this.setState({ src });
}
catch(err){
//Do whatever you want when the image failed to load here show return different JSX element
}
}
Solution
There is an attribute on the image tag called onError, which can triggered a function when the image fails to load. So what you can do is when image fails to load either put different image i.e default image or different JSX element as your wish.
Example:
import {useState} from "react"
function App() {
const[iserror,Setiserror]=useState(false)
const errorFunc =()=>{
Setiserror(true)
}
return (
<div>
{!iserror?<img onError={errorFunc} src="noimageurl" alt=""/>
:<div>This will show when image fails to load</div>
</div>
);
}
use fetch
const url="your-url-here"
fetch(url)
.then(res=>{
// valid image
})
.catch(error => {
// Image not found, Handle it here
}
Related
I'm working with a project written in jquery and I want to integrate this code in my react project. I'm trying to send a query to my graphql server by clicking a button.
There is a JQ function that creates multiple elements like this:
canvas.append($(`<div class="d-flex flex-wrap my-2"><img class="else_picture" src="${elem.artworkUrl600}" height="150px"><div class="mx-2"><div class="elseTitle" id="${elem.trackId}">${elem.trackName}</div><h6>by:${elem.artistName}</h6><h6>keywords:</h6><p>${elem.genres}</p><div class="d-flex justify-content-start"><button value="${elem.feedUrl}" class="get_description"><a target="_blank" href="${elem.trackViewUrl}">Info link</a></i></button><div class="like_box"><i id="like" class="fa fa-thumbs-up"></div></div></div><hr>`)
);
My goal is to connect a function "onClick()" to all buttons inside these created elements. For that I'm trying to define a function that would query all elements by id and connect it to a function with a hook to my graphql server:
function connectFunctionalityToLike(){
$("#like").on("click", function(){ Like(this); });
}
function Like(x){
console.log("clicked");
const { loading, error, data } = useQuery(ME_QUERY);
if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;
console.log(data);
}
My function Like() does not really work because I'm missing in understanding how elements in react actually work all together with jquery. I cannot rewrite code in JQuery. I just want to integrate this existing code. Is there any way around connecting react hooks to created elements by id?
Is there
You should create a React component wrapper for the JQuery function.
You will have to manage the React lifecycle manually - by calling the JQuery function in a useEffect() callback and taking care to remove the DOM elements in the cleanup:
function ReactWrapper() {
const { loading, error, data } = useQuery(ME_QUERY);
const [ data, setData ] = React.useState();
React.useEffect(() => {
jqueryFn();
$('#like').on('click', function(){ setData('from click') });
return () => {
/* code that removes the DOM elements created by jqueryFn() */
};
}, []);
if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;
return <div>{data}</div>;
}
Then, in this React component, will be allowed to use hooks.
Also, if your JQuery function is so simple, you are probably much better off with rewriting it in React.
As Andy says in his comment: "You shouldn't be mixing jQuery and React." - But, we've all be in spots where we are given no choice. If you have no choice but to use jQuery along side React, the code in the following example may be helpful.
Example is slightly different (no canvas, etc), but you should be able to see what you need.
This example goes beyond your question and anticipates the next - "How can I access and use the data from that [card, div, section, etc] that was added by jQuery?"
Here is a working StackBlitz EDIT - fixed link
Please see the comments in code:
// jQuery Addition - happens outside the React App
$('body').append(
$(`<div class="d-flex flex-wrap my-2"><img class="else_picture" src="${elem.artworkUrl600}" height="10px"><div class="mx-2"><div class="elseTitle" id="${elem.trackId}">${elem.trackName}</div><h6>by:${elem.artistName}</h6><h6>keywords:</h6><p>${elem.genres}</p><div class="d-flex justify-content-start"><button value="${elem.feedUrl}" class="get_description"><a target="_blank" href="${elem.trackViewUrl}">Info link</a></i></button><div class="like_box"><i id="like" class="fa fa-thumbs-up"></div></div></div><hr>`)
);
export default function App() {
// state to hold the like data
const [likes, setLikes] = useState([]);
// create reference to the jquery element of importance
// This ref will reference a jQuery object in .current
const ref = useRef($('.elseTitle'));
// Like function
function Like(x) {
// ref.current is a jQuery object so use .text() method to retrieve textContent
console.log(ref.current.text(), 'hit Like function');
setLikes([...likes, ' :: ' + ref.current.text()]);
}
// This is where you put
useEffect(() => {
// Add event listener and react
$('#like').on('click', function () {
Like(this);
});
// Remove event listener
return () => $('#like').off('click');
});
return (
<div>
<h1>Likes!</h1>
<p>{likes}</p>
</div>
);
}
I'm currently building a React component in which user can upload images. In this simplified example, I want to upload 3 Images. When the upload of each file finishes, I want to add this file to my list of uploaded files.
Problem: Because the setter method of useState is not synchronous, we only add one of three uploaded files to the list. The other two additions become overwritten by the last uploading file.
Here the example:
const Example = () => {
const defaultValues = ["aaa.jpg", "bbb.jpg", "ccc.jpg"];
const [uploadedFiles, setUploadedFiles] = React.useState([...defaultValues]);
const uploadFunction = () => {
//images I want to upload
const selectedImagesToUpdate = ["ddd.jpg", "eee.jpg", "fff.jpg"];
//iterate over list of images, which I want to upload
selectedImagesToUpdate.forEach(item => {
//upload image
uploadImage(item).then(response => {
//on response, add uploaded item to myList
console.log("add item ", response);
setUploadedFiles([...uploadedFiles, response]); //<-- here is my problem
})
});
}
const uploadImage = (image) => {
//blackbox for uploading an image async with axios like:
//return axios.post(url, image);
return Promise.resolve(image);
}
return (
<div>
<p>UploadedFiles:{JSON.stringify(uploadedFiles)}</p>
<button onClick={uploadFunction}>Upload</button>
<button onClick={() => setUploadedFiles([...defaultValues])}>Reset</button>
</div>
);
};
// Render it
ReactDOM.createRoot(document.getElementById("root"))
.render(<Example title = "Example"/>);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
Here the result:
["aaa.jpg","bbb.jpg","ccc.jpg","fff.jpg"]
What I want as a result:
["aaa.jpg","bbb.jpg","ccc.jpg","ddd.jpg","eee.jpg","fff.jpg"]
That sounds like a common use case.
How can I fix this? How should you handle multiple setStates?
Ideas for a much better way to handle an upload of multiple files? In my use case I have to delete some selected files and upload some selected files on AWS S3 server, if a user clicks on a submit button.
Thanks
Use the callback version of the setter.
Currently this adds an element to whatever the state array was when the component rendered:
setUploadedFiles([...uploadedFiles, response]);
But if multiple state updates can be batched/queued, then each of them would use that same initial value. Instead, the callback version provides whatever the current state value is in that batch/queue:
setUploadedFiles(prev => [...prev, response]);
I am trying to use a third-party API for getting YouTube thumbnails with higher resolution, which sometimes fails with code 404. If I fail to fetch the image, I would like to replace the src with the default YouTube thumbnail retrieved using its own API (I have the url stored in a json). When I tried to implement this using the img onError event, it appears that nothing is fired when the fetch fails. Does anybody know what's going on? Thanks!
const TestView = () => {
const videoId = "tuZty35Fk7M"
return (
<div>
<img src={`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`} onError={() => {console.log("errored")}}></img>
</div>
)
}
Update:
This ended up working pretty well
const TestView = () => {
const videoId = "tuZty35Fk7M"
const imgRef = useRef(null)
const [thumbnailSrc, setThumbnailSrc] = useState(`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`)
const defaultThumbnailSrc = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`
const handleImgValidity = () => {
if (imgRef.current.naturalHeight == 90) {
setThumbnailSrc(defaultThumbnailSrc)
}
}
return (
<div>
<img ref={imgRef} src={thumbnailSrc} onLoad={handleImgValidity}></img>
</div>
)
}
It's nothing to do with React. Try visiting that url in your browser with a random string for the videoId. It will still display an image - in this case the default youtube thumbnail. So even though it's technically a 404, and your browser will report it as such, the image still has something to display so it won't fire the onError function.
If you replace the url in your code with something that is definitely a 404, your code works fine. Run the snippet below where i've swapped out youtube for google and you'll see your error message.
function onError() {
console.log('errored')
}
<img src="https://img.google.com/vi/some-random-id/maxresdefault.jpg" onError="onError()" />
Here is the working example of firing onError function.
https://codesandbox.io/s/reactjs-onerror-f7dq77
import React from "react";
import _ from "lodash";
export default function AllPhotos(props) {
let arrOfPhoto = _.forEach(props.photo, function(url) {
//console.log("my", url); => I get this "data:image/jpg;base64,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"
return <img src={url} className="singlePhoto" />;
});
return (
<div className="allPhotos">
{arrOfPhoto}
</div>
);
}
I'm trying to display images on my browser by using Base64 and react. What I want to do here is put base64 string(url) into src of img tag. If I copy and paste the base64 string, "data:image...", to a search bar of google chrome, I get a picture of a dog, however, if I put {arrOfPhoto} on my file, it doesn't show an image on the browser, but instead, it shows literally "data:image/...". I guess I'm not able to put the base64 data into src attribute of img tag correctly, but can you see what I'm doing wrong and how to fix it?
You are doing great, also you have structured your AllPhotos React functional component very well, just use it, I have tried and tested it.
AllPhotos.js
import React from 'react';
const AllPhotos = (props) => {
const url1 = "data:image/jpg;base64,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";
const url2 = "data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUSExMVFRUXGBcZGBgXFRcVFRUVFxUYFxYVFRUYHSggGBolGxUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGxAQGi0lICUtLS0tLS0tLS0rLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAOEA4QMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAADBAACBQEGB//EADwQAAEDAgQEBAQFBAAFBQAAAAEAAhEDIQQSMUEFUWFxEyKBkQahsfAUMsHR4SNCUvEVM3KSogdTYoKT/8QAGQEAAwEBAQAAAAAAAAAAAAAAAAECAwQF/8QAJREAAgICAgICAwADAAAAAAAAAAECERIhAzFBURMiBDJhQnHw/9oADAMBAAIRAxEAPwD6eCrAoMojSqA7KhK5mVXFABGlWlCYURAzj3WWNhKv9UrVquWDhh/WJ6oAc+JXeReEz2K9r8SO/pnsvnXjXKymjSAUVLovjws8vuu1XGFmaoarYhKuvdKVKitQcSFajRGRu8FaLo2OYk+DOuU1jnpLsvwJ4YwVtNIhYNN10/SqlYzWzr4n9RyobJYlXe6yXLkihsOQqxUlUqFAgbSl6pujpeoUAVDrpl2iVbqmKhTAfw2yecbhZuGOi0P7h2TJZaVFxRMVntSugobXKxK6zzDq4SoFV6ALsKuSgMVy5AzlYrJw7fOe606zrFecq47K4pDG/iR/kPZfOXnzFeo41ji8QvPMpRJKmSs0joAxirWqWRn1BCTLxB7rJLZdlHMklGpQGhCbV8x7KOdZa0RY7w6pDimMVWWbgn+Yo2Iq2Ullqb7rQouWNRqXWnQcsJ9nVx9D73WQJVnmyDmUmg4SqVDZcLlSo+yBFSUrVcjZkvXQMlN1wmquiSpapyoZCAHMLsnQ7zBJYY2CYd+YJkMYzqJfOoqEe7GsKzxCDhawzA7FP41lpC6zzBVrlHIbDdWeUARpUc9KVsUGrK4rxTI2eSQzbxlQBpuvH4qm4kkc1l1/is1DliExS4yA26Bi7qrg7zJTiFYRZTE40P0ShYSpcikhR9ZZdfFkSFtVMKSgM4KXLNNGjTZj08dBKYbjZCdrfD5XKXA3Ks0ThIFhsTdSvipWrR4EUxQ4CJuFOcS8JGZg2nVadErSHDQAlKmHgrGTs6oaVF3OQiVx5VJSKsazLlQoYcpUdZAWipKXquRM6XqFA07C0dUy4wEpSsU3UNkDsdw50TM3SuFKYm6aJZXMuKiioij1NJ0MaOgW3w3GZ2ZTqF5DCY8OGuyabxhlFoM3JXUmebZ6Gs4N1QH4gQvNcX4+KgaGnuiVeIAU9dkskMQ+IeKEGAVhYzGOe2Cr4phqHMsvEucLBZttEtgsPhZci4nDvbYXVMI9wcCtijVBJkaqYz9gmzLptI1WjhrqVWDZe0/9P+HDz1X05Fg0uFupCyW5Ui4yaZjYPhD3iRTcR2WlS4FVAnwz7L3dTGsDfK4W5LNqcWPNVKKj2zphKTPJvwUfmYR6K9LhpNw23Wy9H/xBty4j1WfheJCq6QBG2/yWSaujWnVgqPBiROZoQKlCmwgPcRO8WCexWNynKI+qU4w8ZBOp0VyhSsmMrlQnjAGOLTFvmOaz6+UqmIcXEmUHwuqzJ+RieKtogRZaZoA6ogothNkuTZkhyFVqJzFYfkszE0ipbMpTkQVLq5SbJGqaYVRpDmpbLl0IjalknUqKraqLHHn3s9BhEcalIYWtom2VhKpHTkmSVEPxQorIsxG8ScBAKo7El1iZWe8EI1FpSt0eWh2jUWhSxEiCVlMpo7RCWQ06NVjo0TuF4SKlzCw2E809huJvZohS9lqS8l/iDDU8KwVHgluYNsQDfuvQ/A7MFimlwokwYOd5MH0svOcRxLcSzwqwlp+RGhXqvgijTo0wymA0DWNzzPNb8aixun0euZwXCt0w9P2lYPxhjMR4FRuGAaQIED6L0lPESEtUw7XAtKqUfRUGl2fN/gfE4kMdTxAdEy1zoBk6iy9GaRla9LhLRIN0F/D3A5W3bz5Ln5Ivs6uOS/UxOJN0aLuOgWTiadTDts12Z1l61/A8jvEkkq7cGXiT81gp0+tm+Ka70ec+H8G4f1Kzr6iTf2R8fWzkkf26dT+wWpieHkCZWVWpACepUz55eUVDgj4ZjvDhqgveVqPpnlZK18LFwiHImc/L+M4bTtCzahRQVMisKS1oxSKwCp+GaVHsVASENDpHanC2lBqcOhOU6qt4yVDqJ5zGYMi4WW4ulexrNBSD8CDsgynBeDLoVYF0cYlFr8OtASbuHvF1SYvsMeKog+G7kup2FsqKQKLSwwRG04RqbYulZko7AeANEwMEI1RGUZKfpUG80GseNMQp4AnRR/DXLawwa3dONrNQa/DE8z+BcE7gxUb+VxBW0WtPJcDGi8pqVPQfDENhPiCu2Gmm13WYW/h8eHiTDXcgV5t1Via4TghUqBwJAGvIrWPN7FLiXg9Th2zfZPMYEKmBojsb1VL7O2S/qqRKlKQlRQiVoByFVarwRObPO8XqZWkrKw9IuEwtTiFB5qBuWWayec7pinhZF1hP8e3Z0Q58Y0eaxFEgyTZXZhswWzX4VmdJmFerhmtFlyS4Wjrjzpqjx/EsN4Z6JAV17bE4VtRpaYnsvGYyjkeWnZXCXhnF+RDF2uitR6lEzqhucqlXZhkNOZCBUdBUaCV2o1MrKyeIr03oHhbquhUhdDRKjqg0ISlSqhPciyvkHIb0USS6jZPyg2NJRm4Z0IQkaIzcQ5CIVeSvhuG663NzXHViuGrEJAXc53NVbiHq5xI5LnjBA7/pHYx+i7+JfGqq+uEHxJSIcn7GWVHuIAmSvo/A8OKdJrbyRJnX1Xz/AOHml9dgtruvozX3srgjXiXbNOkEyAErh3WuiCrOi7IikHJhUc5DzpZ1S6sgZABUgBLUKhM90WUwLPas7GJuq47LPruJ1WHL0b8XYrmg6rG+JcFJbUG9itaqbwEHiD/6RC5Gq2dElkqPIVKKE5p2TpfJhBfSIQcbj6BsfZdAsiBgm6YYGhGQ0hBmZHGEdMlNMImQuvxSdlYozqzByQXs5rR8RpKrUykaJJicUZshRN+G3konZGCMwSrNqKz64HdKSZmEEvQ842QajrqjiYBCqwmEMTYUBVjZdc47LjC5xiEkKgjaIiVU0b2TdNurVZ7csKmPE0/g6iBUc4m4FtP2XtaLwV4T4fqxUJmJHVeyw9QRr98lfGbw/U1aTpTE/f1WfTqQAUxSqSupGbGKjkviKkbfY0Vi/wCaWxz/ACFWSEwz7CNCmA+0rKwb/KI2j7+icaUmCCVXpOuEy4ykMRUsQsZo2gzNc/zb+iVx1a5b0suvqedC4tZzTzBXLJaOpMxAwo4qeVKmsbiUJzzKjI4MqGACSrETYpM1CN1b8RokCY0apaeiJ4wI0Srnk6qgxIGydlXRfxguuxYAQ6FOdRqpi6QJkWAHuihbK/jOi6loaomK5F6VFsk7q2QG8xz/AIQq1aSMo7qjnZYO+6q0TYxTc2fMCWgbapUVwZ5SoauXQpKvWJuB3Utg34H21AAZRWV9Eg+mSB1ThoBrRmm8i3IboFsO6rB6811+KO45pTMZg/fVcr1YGl0Njsf4biQ1x66Lcp8aaPKbb3+q8SKpBka/eiKP6jZ/uHW6cJ+jbikume3b8QNJgSY32nT5J7h3Gg7povI4DCHKtzh9CLFbxnI2lCJ6gYuYKT4lihkd0/2syticjgAdVhca4xDX31/0uqzla2es4fiYF+g7rT8a3svKYfE+VoBvlb8wFptxPlHoECNY19D6FZfEa8E/f2FKuIj77/qszH1Z0WXI9G3GtgBW8yH8QYmA3sk31/OsHi3F89UtFwLLlfRrySxQ6H2lUdWN4XMJUbGsbXieoARy9pAIsYv1iZMLLA46LUMOXmTPU/sj08FM62Uw0NaYPpOl7o1LEeUwdYv21CtJIpJCoAJN76FR9AAR3uu5QfPlgzvuey7XH9pmwm20oG0ir2uEEG0D0K6aDiBJ09+oR3BuWJ5X13XaddgmZ9defunY7Bf8PPL5hRM/jRyUT0OzBNUiOd5A01VXVAYB2SReZ1Av7d+qgeMuaQQLz+3zWLbOexpzxyHzk/sgCrflbkf2+7IDjuJcBf3Ag/NdovkGLc5k67GfQdoVXYrHadWZ1HTYcoTGaW5pDradDuPl7pNrc0AHbT77LlHmTb9BvHJTbKTCVHE2tPPWLadEtXqmYA01n76ao7+0T++k7fwuOIgWvod+v1VX/ChUuJkyAIgCb237INHFOY9rthE9QT+ibc4QRFunUJDERFhIg368h7pjTPd0qoHYiw5ynMPndJAMc1ocM4Gwsp1SBJpsP/iJW1h8OADoF1w43ezeXKq0fPviDiDadQNzCdxO439l5Xi/EgZOYLH+Jar/AMTVL5zCo8RN8rXW+ULJdJEk327HSQqcrZhdH0bgXGA5kTfT2sP1XqqOLBAHb79l8NoYipSdDTBNuZ107r3PA+MOcyCZcNT8pVZDWz3bsRtt/Aj5pHEV7a/7WMOK6zrt7T+iTrcUklom8nqI3j0WMnZ0R0XxvEAMxkToNL+ix2YYlzX6OJ215aboeOANQwSG2Mu5ZoEddPdMcPqtzHNmsCWnnofLY3g/MKKaMeWebNTAUbkk3JIG+/mJ5pimwyco5ieU/SUHABjKhuSJEyJ5RB2meSYw9YbSHZp/WDO/8qGyNIPhw3IRpA9TeB9Qr4Zw8oaYET1ub69/kg0HOLnFgGjiAbCDd0GbCCV3BkZo1bfpbTXQCxPv0Ubsa2E/t/NbMTY2Ii1/quU3Od5dJt26zv0TVPCjLOUFwFhIynSwib6n+FytTDIsYMDrpqOklw6wnQ2gdTDuawkzvFtYsANgbKrHOc2dSJ9rA69vqr1POLCYGa9gASDA2iFym46EAza1oI3g3j77lWx4in4zt8lEx47/APJ3/wCbP3USxFZgObmtGka3IMWEnmLSgVsCC0wQCCBqfaNP9KGsYEEkE2Ow11++6ucwkFs6wbRaP5t0S2jCrO0aYbAB68hm3M8tNEcHL25ybbnfT/aC1ukG1joecntz6Su1s2XNqBt6XBO9yAnbegoJSiBGhJi5g3kA78r9VAf9z339SlqbXQJJPMWIFoNh6+ybNOGyB23LiCB79fVOvA1sgqEAzv768ggmodbWBn3FrdApTpTGYwTIGskgwTYWi8n6rv4ZzpteBa1hc/m9fcQliOgfhEx/dJiRuT0jaw9EjjaT48jd4PcgwI6kFarJEDLlOoNrbemqviWkkAGXXA2AEmJPd22iY6Pp2AxQFGm0EWaMt9W7H1EFGGJBFj97fUL55R4vUp02tLTLZB02tfrp7KHjFZrS8HKItO5MER2j7uT2fNEZ5Pi/9SvUcQP+a8E9A4iY52nrZAqcPAI5ZmjTQQbkdCHT29/ReBALsszmdOphzrzP/T9eaVdhiW2s06k8zoTud/dYuexVYjwfgzKtYMfYtdm28wbBytvqfuNUHE4R9J0RHmIBGmUlw80dL+i2g3+8ucS2S2APzC4mSOXuuYgCJJbfLqTMgG493a80sx0q0Z7azt2ki97WMEAT/wBUX2ug0a3mzNaCCdH7ka5YuDEfynsVgHFrjpLZEGbGNeURJnpKcweFaw5XOa4wfNO5ADnHrLif/r7ux2xb8Gc+YeZpAgESb3iCb8rTr1VqNOBDRfQHkDGg6QStGvRc0Cw8rok6TaNNszbRrOyA97c8Na5od+WLkS2dBqARprqspNg1sNQwg/tgCS4zJm9gY6T6I5w/iBt7zBk84tzsBr9kVGrFOcsuBMkWkAbj9v8AIq1Om4tJBDb72nMIJnYiUrsdWO0WNHmEtBkZSczW7Obe9i0G+yHUdAgX0E6i15HQ29vbmR7IPiAySSHCfMHlsgHWQDfayawYdcmm3LmAHmdBgXGW5i+miHXguvCF/ELXa+xgixEX7C3VOHM4zyA8sgzJBu7cGBdHo1zPmJ1/tDSJgiIIEbfukKrnEHyixEFjgNDaW9JuIhUkUkFqyST07NDb+WOXP0Q6ID2ySQIEzIJmD2MAwjU3GY7Fx6f4nsAPbouvpQbGb9wTv3++6nrZP9A/iaP/ALI/7nqJ7xnf5N/8lEvt/wBQYyPJfhjfWCJywB6h3WFGYR0TMQT/APHUDbcbjVMCuJymzdo2PIjlZENbzF2unljTqPdWtHPQHwxPUgzFo5EfNVoMBsZvygCZEDn9bdl01CW5ojMJ7Ok37otIkkTZpMEiJBHPkkolYojIILtSMojUQTcztCFQxZboN7T/AGkOmy6WOkMsCXAchrE/IWRPFYA6bkWaL9d+6SiC0WqASQbkWPQAlxaT3v6LrHWcyLAktJMydJv2n26IXji5cCNL76+3NcqOA8wPpoI5IvRVnZykAyeY7jX6eyHXgkAbEX0Pr2K7PmzRvB37FcdS83m2+e6S0Sy+HzOOVw5a7kXv6fRdqa5nHyjkcwbfQKjXgG8R9dot0UDwQWnfT17J5aCxuhSzEEAnYAnbl6/qqV8OQ51MtLWgmJ2Gw9J+qFlOSxMwB+wC0MficzGNImplIc43kTLT3ABHqhst1Rj0pJgaaRzn6aLuKY3M0CwynqdI02uR7I15sJP8b9F1tIAzEm0k/SVKkT4OYSsZBytI0k+h/KBsJHqVd9SoDma0CSTBHlEkHMI5HborUaG50G317LrqTZOUkt2k/VPKkCbojqrnU4c45wZiPIW8oGkbCOaNhzAkAZiDFycsC5uPT0V30JLcpmehkc+4/ZWZMkAaaAaTMGZU5MoVaLaZT69v1+adpVHAmbtESInS9uuvshFmW+s/YRqD4aDPpMaKYz2OJGNJYXWy5oIAOYNubDlzV2VbQy+s3uOR++arRcQZG/7IrGANIgea82s7f0hVL2UjmHpOMmbH3gfYXKGW4kzoIsAL6jn1KszF5G3GxGm6FVaA4O1t8+SSlfQPouGkO8zgbkfQw4b3CvQfuJHzOYj+fRL1hoQAASL99j1TlGowCQRa563vHM6eypdij2K52/5VP+wqJj8R0P8A2hRVkjTM8lUccx67pujW0JsR93QKLrxrb2XYAJj7hL+s40zTLg5sROp6iTqlXMyGwmZnkLSShUK8vGqPiqmpBsqytFpkcTY5p/cEmUJ7YHMHfuoHkN0tqhjE5gIGmim6QrHBSBLYIg7HXkhVKMS0HQyqUqvSdV11UGQNefRKTTRTZzDuvlm8SJ0Xa1cuc3WEBh6KBxBjmhNNUCZZv5r/AMJt2Hyt8o317qg5GD+q74pJjQBDaRPQTC1ngQHZdY0I+albMXZpGm30S9ePVDDyVKbEPUbG+8wq1qsEAwZ1Sj6/m6qEgi5kgq/9FWMurbDeZVXVRy/lA8UCQBqh+NIPTX0UdibG21up5pttSCSDc676rMY4ESEzRdpOoUpPyCY4Ksx9hAZ+aZOum0JbMZkaBc/EXnRTjLsdm48hu8TZGxeFORpghpETrfaR7rGbiMzom1rrZxOIbkAYTAG+53WnEvrbNIvyZzpbY6adBuPVSkH6tEgH5Qj18V5cmUFwMz32QsLX0tueyqqditeyvh5mlsxbTYGdCjUsO1jZJm3t/ku5+Wh1RMbiAIj8oERzKafodrs74qiHB6KJ2ys2eTpyJHzVqZIMk2RA9sEmxS1YF2mibOMbFYTZQOzWSow5FhqdEyGQ0ROebpP+FJsbmw9lKjQ0jrdKB5m/spUebSoeyrHaD2i6HUAs6IKDmnRdZUzCNwkw2EO/VTNNomF0GQqsIBtZGI1YV7xAhSmZ1CTl2ayua/JNJMQw3pzQ3DzXVMO43GpTTNLmCqqgQoaEuB1ui1QHG1kSmyN1eqBqFTehvoTqQ081VpBtuiOpNkk2VZaDI1U42CK06JbBH8JqmTqeS4yr5YsisaT2Q0DVCtIm/Urrmy8BFY65AGiYpOaCHObcJbbElYtTwhYTvf2TYq80Wri50CV/EDQhD10PoYwx8pkKzDtoqeNYQuVKgUp3sEFYRzV8VJG0BItbKKQ4GNlaK8FMz/8AIqIsKIpiPO1NQjM1XVFU/wBTE7Q/5gT4191FFPotCVf/AJn3zUrflUUU/wCQ2GoflQMPuoonPsY7R3S4/VdUS9DCP0KVqaLiiF0R4CcL/MmcT+b3UUV+A8HG6n73RHalRRIBZ+qFW2UUVoaLDT1T+EXVFMuykcpfnTOM/KoomAqNUviNVFFDIYWpsrvUUS8FeA1PT1RnLqiovwKKKKKjM//Z";
const urls = [url1, url2]; // your array of photo urls, which you'll get by props
const images = urls.map((url,index) => (<img key={index} src={url} className='singlePhoto' />));
return (
<div>
{images}
</div>
);
}
export default AllPhotos;
You can just stick it in an image tag.
<img src="data:image/png;base64, [base64 encoded image string here]">
Edit: forgot an important part - this is noticeable if you click the button next to Jeff A. Menges and check the console log.
The important part of the code is the "setFullResults(cardResults.data.concat(cardResultsPageTwo.data))" line in the onClick of the button code. I think it SHOULD set fullResults to whatever I tell it to... except it doesn't work the first time you click it. Every time after, it works, but not the first time. That's going to be trouble for the next set, because I can't map over an undefined array, and I don't want to tell users to just click on the button twice for the actual search results to come up.
I'm guessing useEffect would work, but I don't know how to write it or where to put it. It's clearly not working at the top of the App functional component, but anywhere else I try to put it gives me an error.
I've tried "this.forceUpdate()" which a lot of places recommend as a quick fix (but recommend against using - but I've been trying to figure this out for hours), but "this.forceUpdate()" isn't a function no matter where I put it.
Please help me get this button working the first time it's clicked on.
import React, { useState, useEffect } from "react";
const App = () => {
let artistData = require("./mass-artists.json");
const [showTheCards, setShowTheCards] = useState();
const [fullResults, setFullResults] = useState([]);
useEffect(() => {
setFullResults();
}, []);
let artistDataMap = artistData.map(artistName => {
//console.log(artistName);
return (
<aside className="artist-section">
<span>{artistName}</span>
<button
className="astbutton"
onClick={ function GetCardList() {
fetch(
`https://api.scryfall.com/cards/search?unique=prints&q=a:"${artistName}"`
)
.then(response => {
return response.json();
})
.then((cardResults) => {
console.log(cardResults.has_more)
if (cardResults.has_more === true) {
fetch (`https://api.scryfall.com/cards/search?unique=prints&q=a:"${artistName}"&page=2`)
.then((responsepagetwo) => {
return responsepagetwo.json();
})
.then(cardResultsPageTwo => {
console.log(`First Results Page: ${cardResults}`)
console.log(`Second Results Page: ${cardResultsPageTwo}`)
setFullResults(cardResults.data.concat(cardResultsPageTwo.data))
console.log(`Full Results: ${fullResults}`)
})
}
setShowTheCards(
cardResults.data
.filter(({ digital }) => digital === false)
.map(cardData => {
if (cardData.layout === "transform") {
return (
//TODO : Transform card code
<span>Transform Card (Needs special return)</span>
)
}
else if (cardData.layout === "double_faced_token") {
return (
//TODO: Double Faced Token card code
<span>Double Faced Token (Needs special return)</span>
)
}
else {
return (
<div className="card-object">
<span className="card-object-name">
{cardData.name}
</span>
<span className="card-object-set">
{cardData.set_name}
</span>
<img
className="card-object-img-sm"
alt={cardData.name}
src={cardData.image_uris.small}
/>
</div>
)
}
})
)
});
}}
>
Show Cards
</button>
</aside>
);
});
return (
<aside>
<aside className="artist-group">
{artistDataMap}
</aside>
<aside className="card-wrapper">
{showTheCards}
</aside>
</aside>
);
};
export default App;
CodesAndBox: https://codesandbox.io/embed/compassionate-satoshi-iq3nc?fontsize=14
You can try refactoring the code like for onClick handler have a synthetic event. Add this event Listener as part of a class. Use arrow function so that you need not bind this function handler inside the constructor. After fetching the data try to set the state to the result and use the state to render the HTML mark up inside render method. And when I run this code, I have also seen one error in console that child elements require key attribute. I have seen you are using Array.prototype.map inside render method, but when you return the span element inside that try to add a key attribute so that when React diffing algorithm encounters a new element it reduces the time complexity to check certain nodes with this key attribute.
useEffect(() => {
// call the functions which depend on fullResults here
setFullResults();
}, [fullResults])
// now it will check whether fullResults changed, if changed than call functions inside useEffect which are depending on fullResults