React - background image as props

JavaScript
1

Hi guys,

I have a React related question. Basically, Im trying to set the background of a div to an image.
I have this component…

import React from 'react';
import MenuItem from '../menu-item/menu-item.component';
import './directory.styles.scss';

class Directory extends React.Component {
    constructor(){
        super();

        this.state= {
            sections: [
                {
                  title: 'hats',
                  imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
                  id: 1,
                  linkUrl: 'shop/hats'
                },
                {
                  title: 'jackets',
                  imageUrl: 'https://i.ibb.co/px2tCc3/jackets.png',
                  id: 2,
                  linkUrl: 'shop/jackets'
                },
                {
                  title: 'trainers',
                  imageUrl: 'https://i.ibb.co/0jqHpnp/sneakers.png',
                  id: 3,
                  linkUrl: 'shop/sneakers'
                },
                {
                  title: 'womens',
                  imageUrl: 'https://i.ibb.co/GCCdy8t/womens.png',
                  size: 'large',
                  id: 4,
                  linkUrl: 'shop/womens'
                },
                {
                  title: 'mens',
                  imageUrl: 'https://i.ibb.co/R70vBrQ/men.png',
                  size: 'large',
                  id: 5,
                  linkUrl: 'shop/mens'
                }
              ]
        }
    }

    render(){
        return (
            <div className="directory-menu">
                {this.state.sections.map(({title, imageUrl, id}) => (
                    <MenuItem key={id} title={title} imageUrl={imageUrl}/>
                ))}
            </div>
        )
    }
}

export default Directory;

this passes the imageURL as well as title and id as props to this component which should set the div to have a background image of imageURL…

import React from 'react';
import './menu-item.styles.scss';

const MenuItem = ({ title, imageURL }) => (
    <div style={{ backgroundImage:`url(${imageURL})` }}
    className='menu-item'>
        <div className='content'>
          <div className='title'>{title}</div>
          <span className='subtitle'>SHOP NOW</span>
        </div>
    </div>
)

export default MenuItem;

The props are being passed down successfully, however when I inspect the MenuItem element in the browser I can see that background image is undefined.

Can anybody help? I’m stumped.

Thank you!!

2

You have typo: imageUrl vs imageURL

3

Damn it, thank you haha :joy: