CODEWITHSUNDEEP
javascriptcssreactjsbackground-imagestyled-components
Abhishek Chokra
Abhishek Chokra

Reputation: 1381

Props to set styled components background image using in React 17

I am following a tutorial:

My home:

function LandingPage (){
    return(   
<Container>
    <Section>
        title='Top Model'
        desc='My Description'
        leftBtn='Buy'
        rightBtn='Add to Cart'
        bgImg='car.jpg'
    </Section>
</Container>
    )
}
export default LandingPage;

const Container  = styled.div`
height: 100vh;`

My Section:

function Section ({title, desc, leftBtn, rightBtn, bgImg}){
return (
<Wrap bg={bgImg}></Wrap>
    )
}
export default Section;
const Wrap = styled.div`
background-image: ${props => `url("/images/${props.bg}")`};
`

It's working in Video but not for me, When I inspect my elements I see background image as:

background-image: url(/images/undefined);

Note: I am new to react and using react 17.

Edited: I've checked all props i.e., title are not passing to Section

Upvotes: 0

Views: 447

Answers (1)

taha maatof
taha maatof

Reputation: 2165

modify it like that

<Section
    title='Top Model'
    desc='My Description'
    leftBtn='Buy'
    rightBtn='Add to Cart'
    bgImg='car.jpg'
>
</Section>

that should work

Upvotes: 2

Related Questions