Exporting images and font-awesome icons from seperate js file

Question

I've read a lot of solutions on how to store images in an array of objects. I did every solution and none of them worked for me. Maybe I'm missing a cast?

Images are stored in src folder.

I've tried to export default , but unfortunately it did not solve the problem.

Exporting part(MenuList.js):

import burgerImg from '../images/menu-images/burger-menu2.png'
import pizzaImg from '../images/menu-images/pizza-menu1.png'
import kebabImg from '../images/menu-images/kebab-menu1.png'
import {FaHamburger} from 'react-icons/fa'
import {FaPizzaSlice} from 'react-icons/fa'
import {GiMeal} from 'react-icons/gi'


export const MenuList = [
    {
        id: 1,
        name: 'Burgers',
        img: burgerImg,
        icon: FaHamburger
    },
    {
        id: 2,
        name: 'Pizzas',
        img: pizzaImg,
        iconImg: FaPizzaSlice
    },
    {
        id: 3,
        name: 'Kebabs',
        img: kebabImg,
        icon: GiMeal
    }
]

Importing part(Menu.js):

import {MenuList} from './MenuList'

 state = {
    menu: MenuList
}
   {this.state.menu.map(item => {
               return <MenuItem key={item.id} itemInfo={item}/>
   })}

MenuItem.js:

export default function MenuItem({itemInfo}) {
return (
    <div>
        {itemInfo.name}
        {itemInfo.img}
        {itemInfo.icon}
    </div>
)
}

And then I'm trying to load everything from single component like that:

export default function HomeMenu() {
return (
    <div>
        <h1>Menu</h1>
        <Menu></Menu>
    </div>
)
}

I'm mapping through every element of my list and passing the elements to another component, but the problem is that my images and font-awesome icons aren't loading.

When I run the project or refresh it, I get the following result:

Burgers/static/media/burger-menu2.d3dca9de.png

The console outputs this:

index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

Dev tools panel elements section of images shows this:

Folder structure:

Am I missing a cast about something? I viewed a lot of stack about importing/exporting images, but none of the solutions worked for me.

Answer 1

Modify your MenuItem.js as,

export default function MenuItem({itemInfo}) {
return (
    <div>
        {itemInfo.name}
        <img src={itemInfo.img} alt='' />
        {itemInfo.icon}
    </div>
)
}

To fix icon issue, pass the component as jsx in the object. Modify as:

export const MenuList = [
    {
        id: 1,
        name: 'Burgers',
        img: burgerImg,
        icon: <FaHamburger /> //jsx
    },
...

jsx is just javascript with some syntactical sugar.