Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

108
Views
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

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

modify it like that

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

that should work

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!