CODEWITHSUNDEEP
javascriptarraysreactjsdictionary
Nicolas Prates
Nicolas Prates

Reputation: 1

How to properly use map() in a array?

Im pretty nub at react and JS, so, this is probably a stupid question, but, when I try to use the .map() in a array like this:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {
  productsArray = [
    'Cajo T-shirt',
    'Geometric Skull',
    'Bavaria 350 mL',
    'Inflatable Alien',
    'R2D2 RC Car',
  ];
renderCategories(arrayDeProdutos) {
    return arrayDeProdutos.map((index) => <Text key={index}></Text>);
}
render() {
    return (
        <View style={styles.container}>
            {this.renderCategories()}
        </View>
    );
}
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

I got the following error message: "arrayDeProdutos.map is not a object". I tryed to read the map documentation, but it did'n answered my question.

Upvotes: 0

Views: 94

Answers (4)

Vladyslav Tereshyn
Vladyslav Tereshyn

Reputation: 235

Yes, the other answers are right, but I do not agree with using an index in this case. Also, I think in a real situation you will get your data from backend and most likely you will have an id. So you can use your id as an index. ( I prefer arrow functions )

const productsArray = [
  "Cajo T-shirt",
  "Geometric Skull",
  "Bavaria 350 mL",
  "Inflatable Alien",
  "R2D2 RC Car"
];

export default class App extends React.Component {
  //using arrow function

  renderCategories = products => products.map(product => <Text key={product}>{product}</Text>);

  render() {
    return (
      <div style={styles.container}>{this.renderCategories(productsArray)}</div>
    );
  }
}

Upvotes: 0

Sahil Raj Thapa
Sahil Raj Thapa

Reputation: 2483

You need to pass argument to renderCategories(). So change 

render() {
    return (
        <View style={styles.container}>
            {this.renderCategories()}
        </View>
    );
}

to 

render() {
    return (
        <View style={styles.container}>
            // pass "this.productsArray" as an argument
            {this.renderCategories(this.productsArray)}
        </View>
    );
}

Upvotes: 0

kockburn
kockburn

Reputation: 17616

renderCategories methods expects a parameter but you pass none as can be seen here:

<View style={styles.container}>
    {this.renderCategories()}
</View>

Here is what you need to do isntead.

renderCategories(arrayDeProdutos) {
    return arrayDeProdutos.map((index) => <Text key={index}></Text>);
}
render() {
    return (
        <View style={styles.container}>
            {this.renderCategories(this.productsArray)}
        </View>
    );
}

Upvotes: 1

Treycos
Treycos

Reputation: 7492

Your render function would look like the following :

render() {
    return (
        <View style={styles.container}>
            {this.productsArray.map((prod, index) => <Text key={index}>{prod}</Text>)}
        </View>
    );
}

Be careful as map will return the index of your item as the second parameter and not the first one.

By putting your map in the render function there is no need for renderCategories to exist.

I would also recommend putting this array in your state if it can change at runtime. This will allow your app to re-render your text after any change is made to it.

Another thing, anything declared in a class is accessible via this. in this same class, no need to pass any parameter.

Upvotes: 0

Related Questions