How to properly use map() in a array?

Question

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.

in {this.renderCategories()} you need to pass argument. Change to {this.renderCategories(this.productsArray)} — Sahil Raj Thapa
– Sahil Raj Thapa, Commented Jan 21, 2019 at 15:03

kemicofa · Accepted Answer · 2019-01-21 15:06:08Z

1

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>
    );
}

answered Jan 21, 2019 at 15:06

kemicofa

17.7k10 gold badges93 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nicolas Prates Over a year ago

oh, yeah, I forgot to pass the parameter... I'll Try it out, thanks

Treycos · Accepted Answer · 2019-01-21 15:03:54Z

0

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.

answered Jan 21, 2019 at 15:03

Treycos

7,4913 gold badges29 silver badges53 bronze badges

Comments

Sahil Raj Thapa · Accepted Answer · 2019-01-21 15:16:13Z

0

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>
    );
}

answered Jan 21, 2019 at 15:16

Sahil Raj Thapa

2,4833 gold badges16 silver badges25 bronze badges

Comments

Vladyslav Tereshyn · Accepted Answer · 2019-01-21 15:17:50Z

0

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>
    );
  }
}

answered Jan 21, 2019 at 15:17

Vladyslav Tereshyn

2353 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to properly use map() in a array?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related