CODEWITHSUNDEEP
reactjsecmascript-6
pc4
pc4

Reputation: 73

objects are not valid as a React child (object with keys {background})

I am following a ReactJS tutorial so I cant really figure it out myself what is wrong here.

This is full error message: enter image description here

And this is the full React code where this error occurs:

const SliderTemplates = (props) => { let template = null;

const settings = {
    dots: true,
    infinite: true,
    arrow: false,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
}

switch (props.type) {
    case ('featured'):
        template = props.data.map((item, i) => {
            return (
                <div key={i}>
                    <div className={styles.featured_item}>
                        <div className={styles.featured_image}>
                            style={{
                                background:`url(../images/articles/${item.image})`
                            }}
                        </div>
                        <Link to={`/articles/${item.id}`}>
                        <div className={styles.featured_caption}>
                            {/* {item.title} */}
                            TEXT
                        </div>
                        </Link>
                    </div>
                </div>
            )
        })

        break;
    default:
        template = null;
}

return (
    <Slick {...settings}>
        {template}
    </Slick>
)

}

Upvotes: 0

Views: 319

Answers (1)

Artem Mirchenko
Artem Mirchenko

Reputation: 2170

Wrong style attribute definition. Style is not separate child of div, it is attribute of div This is correct variant:

<div 
 className={styles.featured_image}
 style={{ background:`url(../images/articles/${item.image})`}}
>
</div>

Upvotes: 2

Related Questions