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

115
Visualizações
Is it Possible to Dynamically Generate Dropdown Items?

I'm working in react, and for one part of the project I need x amount of dropdown menus. Each dropdown menu will have y amount of options to choose from. Usually with things like this, I can just use a simple map function and I am good to go, however the syntax gets a little tricky since one DropdownMenu has many Dropdown.Items. My code looks like this, no errors pop up and the console.log statements return exactly what is to be expected, but absolutely nothing renders.

const renderDefaultScheduling = () => {
        return allDevices.map( (device, superIndex) => {
            <Card>
                {renderAllOfThisDevice(device, superIndex)}
            </Card>
        })
    }

    const renderAllOfThisDevice = (deviceObj, superIndex) => {
        let oneDeviceDropdowns = []
        console.log(deviceObj)
        for (let i = 1; i <= deviceObj.amount; i = i + 1){
            let thisOptions = renderDropDownOptionsFromList(deviceObj, superIndex)
            oneDeviceDropdowns.push(
                <DropdownButton title={deviceObj[i]}>
                    {thisOptions}
                </DropdownButton>
            )
        }
        return(
            <Card>
                <Card.Title>{deviceObj.name}</Card.Title>
                <Card.Body>
                    {oneDeviceDropdowns}
                </Card.Body>
            </Card>
        )
    }

    const renderDropDownOptionsFromList = (deviceObj, superIndex) => {
        console.log(deviceObj)
        return deviceObj.remaining_drivers.map( (driver, index) => {
            <Dropdown.Item key={index} onClick={() => handleDriverSelection(deviceObj, driver, index, superIndex)}>
                {driver.firstname} {driver.lastname}
            </Dropdown.Item>
        })
    }

What gets me, is not even the <Card.Title>{deviceObj.name}</Card.Title> line renders, which is not inside the nested map, only the first layer of it... So if deviceObj is logging properly, I see legitimately no reason why that line wouldn't be rendering. Does anyone have any ideas, am I evenm able to do this with DropDown Menus?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

no data is showing beacuse you are not returning it from the map function callback in renderDefaultScheduling and renderDropDownOptionsFromList

i have marked the return statement with return

const renderDefaultScheduling = () => {
            return allDevices.map( (device, superIndex) => {
              ****return****  <Card>
                    {renderAllOfThisDevice(device, superIndex)}
                </Card>
            })
        }
const renderAllOfThisDevice = (deviceObj, superIndex) => {
    let oneDeviceDropdowns = []
    console.log(deviceObj)
    for (let i = 1; i <= deviceObj.amount; i = i + 1){
        let thisOptions = renderDropDownOptionsFromList(deviceObj, superIndex)
        oneDeviceDropdowns.push(
            <DropdownButton title={deviceObj[i]}>
                {thisOptions}
            </DropdownButton>
        )
    }
    return(
        <Card>
            <Card.Title>{deviceObj.name}</Card.Title>
            <Card.Body>
                {oneDeviceDropdowns}
            </Card.Body>
        </Card>
    )
}

const renderDropDownOptionsFromList = (deviceObj, superIndex) => {
    console.log(deviceObj)
    return deviceObj.remaining_drivers.map( (driver, index) => {
       ****return**** <Dropdown.Item key={index} onClick={() => handleDriverSelection(deviceObj, driver, index, superIndex)}>
            {driver.firstname} {driver.lastname}
        </Dropdown.Item>
    })
}
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