Dropdown not showing my data

[joaquin-gs]

This is my first time trying to use this component, so I read the documentation and follow the usage instructions. According to that, I only needed to change the data but I only see '[object Object]' in the button as well as for each option in the dropdown.

Can someone please tell me what I did wrong?

Here is my code:

   const leaveData = [
      { id: 1, title: 'Personal' },
      { id: 2, title: 'Sick' },
      { id: 3, title: 'Maternity' },
      { id: 4, title: 'Paternity' },
      { id: 5, title: 'Unpaid' },
      { id: 6, title: 'Compensate' },
      { id: 7, title: 'Study' },
      { id: 8, title: 'Casual' },
      { id: 9, title: 'Special' },
   ]

   return (
      <View style={styles.container}>
         <View style={styles.header}>
            <Text style={styles.headerTxt}>Leave type</Text>
         </View>

         <SelectDropdown
            data={leaveData}
            onSelect={(selectedItem, index) => {
               console.log(selectedItem.title, index)
            }}
            renderItem={(item, index, isSelected) => {
               console.log(item, index)  // This effectively reveals the things I want to show are there.
               return (
                  <Text style={styles.dropdownItemTxtStyle}>{item}</Text>  // [object Object] is shown here. Why?
                  // I have also tried using item.title, with the same results.
               )
             }}
            showsVerticalScrollIndicator={true}
            dropdownStyle={styles.dropdownMenuStyle}
            dropdownOverlayColor={{ backgroundColor: '#E9ECEF' }}
            defaultValueByIndex={0}
         />

      </View>
   );

Thanks for any help.

[joaquin-gs]

As an additional observation, not even the original example code is working. It doesn't matter if I add or delete the renderButton property, it doesn't output anything.

[AdelRedaa97]

renderButton is required to render the dropdown button, it take selectedItem as an argument like here

    renderButton={(selectedItem, isOpened) => {
      return (
        <View style={styles.dropdownButtonStyle}>
          {selectedItem && (
            <Icon name={selectedItem.icon} style={styles.dropdownButtonIconStyle} />
          )}
          <Text style={styles.dropdownButtonTxtStyle}>
            {(selectedItem && selectedItem.title) || 'Select your mood'}
          </Text>
          <Icon name={isOpened ? 'chevron-up' : 'chevron-down'} style={styles.dropdownButtonArrowStyle} />
        </View>
      );
    }}

For renderItem, to render the item correctly in your example add item.title to render it

[AdelRedaa97]

https://snack.expo.dev/@adelredaa97/mad-yellow-chocolate

check this example