CODEWITHSUNDEEP
javascriptnode.jsreact-nativetypeerror
Leandro Nascimento
Leandro Nascimento

Reputation: 5

TypeError undefined is not a function

i'm new to React Native and I'm trying to create a modal using map function over map function.

I don't know if this is the best way, but i looked at many resources and couldn't figure out how to solve this, because i always get this error on title:

The code:

let times = this.state.plantelData.map(function (nome, key) {
  var detScout = '';
    detScout = nome.scout.map(function (item, i) {
      return (
        <Text>{i + ": " + item} </Text>
      )
    });
  return (
    <View style={styles.container} >
      <Modal visible={this.state.showMe} onRequestClose={() => console.warn("this is sparta")} >
        <View style={styles.modalView} >
          {detScout}
          <TouchableOpacity onPress={() => {
            this.setState({ showMe: false })
          }} >
            <Text style={styles.closeText}> Fechar</Text>
          </TouchableOpacity>
        </View>
      </Modal>
      <ListItem avatar key={key}>
        <Left>
          <Thumbnail source={{ uri: nome.foto }} />
        </Left>
        <Body>
          <Text>{nome.apelido + " - " + nome.nome_clube + " #" + nome.posicao_clube}</Text>
          <Text note>{"Posição: " + nome.posicao_atleta + " - Pontos: " + nome.pontos}</Text>
        </Body>
        <Right>
          <Text note>{nome.pontos}</Text>
        </Right>
        <Right>
          <TouchableOpacity onPress={() => {
            this.setState({ showMe: true })
          }} >
            <Icon type="FontAwesome" name="soccer-ball-o" />
          </TouchableOpacity>
        </Right>
      </ListItem>
    </View>
  )

Print of error

Upvotes: 0

Views: 1361

Answers (2)

Lennholm
Lennholm

Reputation: 7470

map() is a method on Array.prototype, but nome.scout doesn't seem to be an array but rather a plain object.
What you want is the key-value pair from this object so that you can map those. This can be done with Object.entries().

Try this:

detScout = Object.entries(nome.scout).map(function([ key, item ]) {
  return (
    <Text>{key + ": " + item} </Text>
  )
});

Upvotes: 1

Lu&#237;s C Meireles
Lu&#237;s C Meireles

Reputation: 469

In the question comments you said the response json is :

scout: { CA: [ 1 ], DD: [ 2 ], FS: [ 1 ], PE: [ 1 ], RB: [ 1 ], SG: [ 1 ] }

In this case 'scout' is not an array, but an object that's why you cant't use the map function.

If you can't change the API response you could use something like this:

for(var propt in nome.scout){
    console.log(nome.scout[propt]);}

Upvotes: 0

Related Questions