Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

109
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda