CODEWITHSUNDEEP
reactjsavatar
marinamun
marinamun

Reputation: 11

How to integrate the avatars of Dicebear into my react app?

I wrote this code and I have no errors in the console, but still nothing is displayed in the browser. The idea is that the user either uploads their own photo or chooses an avatar of the ones we display with Dicebear.

The name of the avatar collection is bigEarsNeutral.

Why aren't the avatars even displayed? I already installed the dependencies.

import { createAvatar } from "@dicebear/core";
import { bigEarsNeutral } from "@dicebear/collection";


const handleAvatarSelection = (seed) => {
    const avatar = createAvatar(bigEarsNeutral, {
      seed: seed,
    }).toString();
    setSelectedAvatar(avatar);
  };
  const Avatar = ({ svg, onClick, isSelected }) => (
    <div
      onClick={onClick}
      dangerouslySetInnerHTML={{ __html: svg }}
      style={{
        cursor: "pointer",
        border: isSelected ? "2px solid green" : "none",
      }}
    />
  );
return(
 {/* Avatar Selection */}
        <div className="avatar-selection">
          {[1, 2, 3, 4, 5].map((index) => (
            <Avatar
              key={index}
              svg={createAvatar(bigEarsNeutral, {
                seed: `Avatar${index}`,
              }).toString()}
              onClick={() => handleAvatarSelection(`Avatar${index}`)}
              isSelected={
                selectedAvatar ===
                createAvatar(bigEarsNeutral, {
                  seed: `Avatar${index}`,
                }).toString()
              } // Highlight selected avatar
            />
          ))}
        </div>)

I have tried alternatives that ChatGPT gave me to fix the problem but nothing is working.

Upvotes: 1

Views: 258

Answers (0)

Related Questions