Search code examples
javascriptcssreactjsbackground-imagestyled-components

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


Solution

  • modify it like that

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

    that should work