React component with re usable avatar

Question

I'm new to React and have hit a roadblock. Basically, I'm trying to create a simple reusable component. I am using MUI and want to create an avatar component to be called anywhere with a different image for when it is called. I want to be able to call in an argument when declaring the component in various pages. Please help

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';
import frankieAvatar from '/Users/rodriguezmedia/Desktop/react-counter-app/src/images/oink.png';
import { AvatarGroup } from '@mui/material';

const designerOne = {
    src: frankieAvatar
}

export default function AvatarDesigners() {
    return (
        <Avatar src={designerOne.src}></Avatar>
    );
}

Answer 1

you can do it simply like below.

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';
import { AvatarGroup } from '@mui/material';


export default function AvatarDesigners({src}) {
    return (
        <Avatar src={src}></Avatar>
    );
}

The component that you use it:

import * as React from 'react';
import frankieAvatar from '/Users/rodriguezmedia/Desktop/react-counter- 
app/src/images/oink.png';
import AvatarDesigners from './AvatarDesigners'

const designerOne = {
    src: frankieAvatar
}

export default function Profile() {
    return (
        <div>
            <AvatarDesigners src={designerOne.src}></Avatar>
        </div>
    );
}