How to set a particular value to drop down when the view is loaded ?

[poojalivin]

Hi. This is my code

<SelectList 
     search = {false}
     setSelected={(value) => {setSelected(value);}} 
   data={[
                      {
                        key: '1',
                        value: StringsOfLanguages.male,
                      },
                      {
                        key: '2',
                        value: StringsOfLanguages.female,
                      },
                      {
                        key: '3',
                        value: StringsOfLanguages.unspecified,
                      },]
      } 
    // save="value"
    defaultOption = {{key:'1',value:StringsOfLanguages.male}}
/>

I have given defaultOption. But still the item which was selected when the view was previously loaded is showing be default.

[danish1658]

Can you attach a screen video

[tanmaygurav]

Hey @danish1658 Greetings to you!, I have the same question.
I am using the Select list to select language from user on a profile screen and saving it in the backend.
When the user comes to the profile screen he should be able to view the previously selected value and change the value in the same Select list.
Is there any way to set the value to this Select List without the user interacting with the view, just on loading the screen and getting the data from backend
Trying to achieve the same functionality in Multiselect also
I Hope this explanation is enough to get my question across, let me know if any further explanation is needed. Thanks

[RuarddeBruyn]

Anyone manage to get this to work?

[nomuppets]

Not ideal but check out the placeholder prop... @RuarddeBruyn

import React, {useState} from 'react'
import {Text} from 'react-native'
import {SelectList} from 'react-native-dropdown-select-list'
import {useDispatch} from 'react-redux'

import styles from '../../styles/styles'

const SuperDropdown = props => {
  const {label, entity, keyName, fieldName, updateFunction, theme} = props
  const dispatch = useDispatch()

  const data = [
    {key: 'talent', value: 'Talent', color: '#E00714'},
    {key: 'jobs', value: 'Jobs', color: '#2B8589'},
    {key: 'dating', value: 'Dating', color: '#e1a573'},
    {key: 'accommodation', value: 'Accommodation', color: '#2E87E8'},
    {key: 'travel', value: 'Travel', color: '#54643A'},
    {key: 'flatmates', value: 'Flatmates', color: '#FF6263'},
    {key: 'animalTalent', value: 'Animal talent', color: '#EAC8A8'},
    {key: 'shortStays', value: 'Short stays', color: '#FFA862'},
    {key: 'friendships', value: 'Friendships', color: '#3A3E4D'},
    {key: 'reset', value: '- RESET -'},
  ]

  const getColor = value => {
    const item = data.find(item => item.key === value)
    return item ? item.color : theme.colors.white
  }

  const getValue = key => {
    const obj = data.find(item => item.key === key)
    return obj ? obj.value : null
  }

  const [selectedCat, setSelectedCategory] = useState(entity[fieldName])

  const sendIt = value => {
    dispatch(
      updateFunction({
        [keyName]: entity?.id,
        data: {[fieldName]: value},
      }),
    )
  }

  const [reset, setReset] = useState(0)
  const clearStates = () => {
    setReset(reset + 1)
  }

  return (
    <SelectList
      key={reset}
      search={false}
      maxHeight={1000}
      placeholder={
        <>
          <Text
            style={[
              {
                color: !selectedCat
                  ? theme.colors.background
                  : theme.colors.white,
              },
              styles.h4,
            ]}>
            {!selectedCat ? 'Select a category' : getValue(selectedCat)}
          </Text>
        </>
      }
      arrowicon={
        <Text
          style={{
            top: 8,
            left: 8,
            fontSize: 10,
            color: theme.colors.grey4,
            textTransform: 'uppercase',
          }}>
          category
        </Text>
      }
      boxStyles={{
        borderWidth: 0,
        paddingTop: 6,
        paddingBottom: 6,
        borderColor: theme.colors.grey5,
        backgroundColor: getColor(selectedCat),
        margin: 8,
        marginBottom: 0,
        borderRadius: 20,
      }}
      inputStyles={{
        left: -5,
        color: theme.colors.white,
        ...styles.h4,
      }}
      dropdownTextStyles={{
        color: theme.colors.white,
        ...styles.h4,
      }}
      dropdownStyles={{
        borderColor: theme.colors.grey5,
        borderRadius: 20,
        margin: 8,
      }}
      dropdownItemStyles={{
        paddingHorizontal: 13,
        paddingVertical: 6,
      }}
      setSelected={value => {
        if (value === 'reset') {
          sendIt(null)
          clearStates()
          setSelectedCategory(null)
        } else {
          sendIt(value)
          setSelectedCategory(value)
        }
      }}
      data={data}
      save="key"
    />
  )
}

export default SuperDropdown