Render Content Dynamically from an array map function in React Native

Question

I'm trying to get data from an array and using map function to render content. Look at

**{this.lapsList()}**

and the associated

**lapsList()**

function to understand what I'm trying to do. The result is nothing is displaying (Views under view, etc.) Here is my simplified code:

class StopWatch extends Component {

constructor(props) {
  super(props);

  this.state = {
    laps: []
  };
}

render() {
  return (
    <View style={styles.container}>
        <View style={styles.footer}>
          <View><Text>coucou test</Text></View>
          {this.lapsList()}
        </View>
    </View>
  )
}

lapsList() {

    this.state.laps.map((data) => {
      return (
        <View><Text>{data.time}</Text></View>
      )
    })

}

_handlePressLap() {

  console.log("press lap");

  if (!this.state.isRunning) {

    this.setState({
      laps: []
    })

    return

  }

  let laps = this.state.laps.concat([{'time': this.state.timeElapsed}]);

  this.setState({
      laps: laps
  })

  console.log(laps);

}

}

please also describe your problem

Ivan Chernykh
– Ivan Chernykh

2016-05-25 19:30:56 +00:00
Commented May 25, 2016 at 19:30 — Ivan Chernykh
– Ivan Chernykh, Commented May 25, 2016 at 19:30
Done. In fact nothing is displaying (generated views).

Xavier C.
– Xavier C.

2016-05-25 19:33:03 +00:00
Commented May 25, 2016 at 19:33 — Xavier C.
– Xavier C., Commented May 25, 2016 at 19:33

Ivan Chernykh · Accepted Answer · 2016-05-25 19:47:11Z

83

Don't forget to return the mapped array , like:

lapsList() {

    return this.state.laps.map((data) => {
      return (
        <View><Text>{data.time}</Text></View>
      )
    })

}

Reference for the map() method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

edited May 25, 2016 at 19:47

answered May 25, 2016 at 19:32

Ivan Chernykh

42.2k13 gold badges136 silver badges148 bronze badges

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

1 Comment

Narendra Singh Over a year ago

I want to get index of the item too, but unable to get that. this.state.array.map((item, index) =>. The index, I am getting from that is some object with Cyclic reference, so unable to print it as well. Any way to get index value for that?

Nader Dabit · Accepted Answer · 2016-05-25 19:34:14Z

10

Try moving the lapsList function out of your class and into your render function:

render() {
  const lapsList = this.state.laps.map((data) => {
    return (
      <View><Text>{data.time}</Text></View>
    )
  })

  return (
    <View style={styles.container}>
      <View style={styles.footer}>
        <View><Text>coucou test</Text></View>
        {lapsList}
      </View>
    </View>
  )
}

answered May 25, 2016 at 19:34

Nader Dabit

53.8k14 gold badges110 silver badges91 bronze badges

3 Comments

Xavier C. Over a year ago

Ok thanks Nader, but could you tell me why it's better please?

Nader Dabit Over a year ago

Hey, wouldn't say it's better, just another way of structuring your code I guess. Either way will work as long as you return your component in map.

Xavier C. Over a year ago

Ok, I asked that because sometimes it takes less ressources! ;-) Btw thanks for your code!

Codemaker2015 · Accepted Answer · 2019-05-09 08:22:56Z

2

lapsList() {

    return this.state.laps.map((data) => {
      return (
        <View><Text>{data.time}</Text></View>
      )
    })
}

You forgot to return the map. this code will resolve the issue.

answered May 9, 2019 at 8:22

Codemaker2015

16k9 gold badges118 silver badges93 bronze badges

Collectives™ on Stack Overflow

Render Content Dynamically from an array map function in React Native

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related