Mapping an state array in React Native

Question

I am trying to map through the array that was stored in the state. The arrray had datas from firebase. I did console.log to see the what the state contains and it has the values but just not mapping it.

render() {
    let test = this.state.subjects.map(sub => {
      return (
        <View>
          <Text style={{ textAlign: "center" }}>{sub}</Text>
        </View>
      );
    });
    return <ScrollView style={{ marginTop: 30 }}>{test}</ScrollView>;
  }
}

[ 0: "This is a test 2" 1: "This is a test" length: 2 proto: Array(0) ] — thatonenerd
– thatonenerd, Commented Dec 26, 2018 at 0:34

Nirmalsinh Rathod · Accepted Answer · 2018-12-26 11:10:31Z

1

Check below code:

renderSub() {
    return this.state.sub.map((value, index) => {
        return (
            <Text style={{ textAlign: "center" }}>{sub}</Text>
        )
    })
}
render() {
    return (
        <View>
            {this.renderSub()}
        </View>
    );
}

answered Dec 26, 2018 at 11:10

Nirmalsinh Rathod

5,2414 gold badges28 silver badges58 bronze badges

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

Comments

davbuc · Accepted Answer · 2018-12-26 00:31:06Z

0

So as you get an Object from firebase you have to convert it to an typeof Array to map over it - so you could do something like

Object.values(this.state.subjects).map(...)

answered Dec 26, 2018 at 0:31

davbuc

5376 silver badges14 bronze badges

2 Comments

thatonenerd Over a year ago

the data is pushed in the state array

thatonenerd Over a year ago

[ 0: "This is a test 2" 1: "This is a test" length: 2 proto: Array(0)

uSai · Accepted Answer · 2018-12-26 06:30:37Z

0

You can use React-Native FlatList to show the values of array.

See the Docs: https://facebook.github.io/react-native/docs/flatlist

answered Dec 26, 2018 at 6:30

uSai

312 silver badges8 bronze badges

Comments

thatonenerd · Accepted Answer · 2018-12-26 15:03:28Z

0

I was pushing the data directly to the state variable. But according to react native docs you should never do that and use ‘this.state.setState’ method.

answered Dec 26, 2018 at 15:03

thatonenerd

1442 silver badges14 bronze badges

Collectives™ on Stack Overflow

Mapping an state array in React Native

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related