Is it Possible to Dynamically Generate Dropdown Items?

April 1, 2022

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?

>Solution :

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>
    })
}