Not able render the images using an API - node.js

Question

I am using multi avatar api to render random images on the UI, but I am getting the below-mentioned error. I also tried using promises to render the UI but failed to get the results.
Uncaught TypeError: The first argument must be one of type string,
Buffer, ArrayBuffer, Array, or Array-like Object. Received type
undefined
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import axios from "axios";
import { profilePicRoute } from "../utils/apiRoutes";
import { Buffer } from "buffer";
function ProfilePic() {
const api = "https://api.multiavatar.com";
const navigate = useNavigate();
const [profilePic, setProfilePic] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [selectedPofilePic, setSelectedPofilePic] = useState(undefined);
const toastStyles = {
position: "top-center",
};
const setProfilePicture = async () => {};
useEffect(() => {
const data = [];
for (let i = 0; i < 4; i++) {
const image = axios.get(`${api}/${Math.round(Math.random() * 1000)}`);
const buffer = Buffer(image.data);
data.push(buffer.toString("base64"));
console.log(data);
}
setProfilePic(data);
setIsLoading(false);
}, []);
return (
<div className="profilePage">
<h1>Pick your favorite profile picture</h1>
<div className="profilePics">
{profilePic.map((pic, index) => {
return (
<div
key={index}
className={`pic ${selectedPofilePic === index ? "selected" : ""}`}
>
<img
src={`data:image/svg+xml;base64,${pic}`}
alt="profile pic"
onClick={() => setSelectedPofilePic(index)}
/>
</div>
);
})}
</div>
<ToastContainer />
</div>
);
}
export default ProfilePic;

Answer 1

Since you were using the async you must have to use await keyword , otherwise it will return promises,and you should use the function inside the useEffect
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import axios from "axios";
import { profilePicRoute } from "../utils/apiRoutes";
import { Buffer } from "buffer";
function ProfilePic() {
const api = "https://api.multiavatar.com";
const navigate = useNavigate();
const [profilePic, setProfilePic] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [selectedPofilePic, setSelectedPofilePic] = useState(undefined);
const toastStyles = {
position: "top-center"
};
useEffect(() => {
const setProfilePicture = async () => {
const data = [];
for (let i = 0; i < 4; i++) {
const image = await axios.get(
`${api}/${Math.round(Math.random() * 1000)}`
);
console.log(image);
const buffer = Buffer(image.data);
data.push(buffer.toString("base64"));
}
setProfilePic(data);
setIsLoading(false);
};
setProfilePicture();
}, []);
return (
<div className="profilePage">
<h1>Pick your favorite profile picture</h1>
<div className="profilePics">
{profilePic.map((pic, index) => {
return (
<div
key={index}
className={`pic ${selectedPofilePic === index ? "selected" : ""}`}
>
<img
src={`data:image/svg+xml;base64,${pic}`}
alt="profile pic"
onClick={() => setSelectedPofilePic(index)}
/>
</div>
);
})}
</div>
<ToastContainer />
</div>
);
}
export default ProfilePic;
Hope this code will help you.
Happy Coding :)