javascript - TypeError: Cannot read property 'label' of undefined RNPickerSelect

Question

I want to make two picker selects in my app, but I have errors in code

this is two generate my data for show in select

const generateSubject = () => {
    const theSubject = dataSubjects?.subjectsConnection?.data?.map((item) => {
      return (
        item && {
          key: item.id,
          value: item.id,
          label: item.name,
        }
      )
    })
    return theSubject
  }

  const generateBasicCompetence = () => {
    const theBasicCompetence = dataBasicCompetences?.basicCompetencesConnection?.data?.map(
      (item) => {
        return (
          item && {
            key: item.id,
            value: item.id,
            label: item.code,
          }
        )
      },
    )
    return theBasicCompetence
  }

this is my rnpickerselect, but I have error like this TypeError: Cannot read property 'label' of undefined

                      <RNPickerSelect
                            key={index}
                            placeholder={{
                              label: translations["choose.subject"],
                              color: theme.colors.placeholder,
                            }}
                            onValueChange={(value) => {
                              setSubjectAssignment((prev) => {
                                prev[index].subjectId = value
                                return [...prev]
                              })
                            }}
                            items={generateSubject()}
                            style={{
                              inputAndroid: {
                                color: theme.colors.text,
                              },
                            }}
                          />
                         <RNPickerSelect
                            key={index + 1}
                            placeholder={{
                              label: translations["select.basic.competences"],
                              color: theme.colors.placeholder,
                            }}
                            onValueChange={(value) => {
                              setSubjectAssignment((prev) => {
                                prev[index].basicCompetenceId = value
                                return [...prev]
                              })
                            }}
                            items={generateBasicCompetence()}
                            style={{
                              inputAndroid: {
                                color: theme.colors.text,
                              },
                            }}
                          />

can anyone help me? because if only one picker select, it's not error

question from:https://stackoverflow.com/questions/65948974/typeerror-cannot-read-property-label-of-undefined-rnpickerselect

Answer 1

Waitting for answers