How to create a loop to list items by clicking a button?

Question

I made a stopwatch and when clicking 'Mark Back' it shows the lap time. If you click more times, it will 'listing' the time, one below the other. What I wanted to do and I’m struggling to do is enumerate each of those times, as for example:

You marked back/clicked the clock button running at 00:32:47, then scored another at 00:40:35 and a last at 00:48:55

And below I wanted to list/list the marked back:

N. Registration	Weather
N1	00:32:47
N2	00:40:35
N3	00:48:55

I tried to put it on a for/while but I’m getting it. The function that marks back is the marcarVolta().

Follows the code: App.js

import React, {Component} from 'react';
import {
  Text,
  View,
  ImageBackground,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import Header from './src/components/Header';
import {tempo, registro} from './src/styles/index.js';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      horas: 0,
      minutos: 0,
      segundos: 0,
      ativo: false,
      voltas: [],
    };

    this.pulsoDeClock = this.pulsoDeClock.bind(this);
    this.iniciarRelogio = this.iniciarRelogio.bind(this);
    this.pararRelogio = this.pararRelogio.bind(this);
    this.marcarVolta = this.marcarVolta.bind(this);
    this.zerarRelogio = this.zerarRelogio.bind(this);
  }

  iniciarRelogio() {
    if (!this.state.ativo) {
      this.setState({clock: setInterval(this.pulsoDeClock, 1000)});
      this.setState({ativo: true});
    }
  }

  pulsoDeClock() {
    var h = this.state.horas;
    var m = this.state.minutos;
    var s = this.state.segundos;

    if (s < 59) {
      s++;
    } else {
      s = 0;
      if (m < 59) {
        m++;
      } else {
        m = 0;
        h++;
      }
    }

    this.setState({segundos: s, minutos: m, horas: h});
  }

  pararRelogio() {
    if (this.state.ativo) {
      clearInterval(this.state.clock);
      this.setState({ativo: false});
    }
  }

  marcarVolta() {
    var txtDoCrono =
      this.formatar(this.state.horas) +
      ':' +
      this.formatar(this.state.minutos) +
      ':' +
      this.formatar(this.state.segundos) +
      '\n';
    this.state.voltas.push(txtDoCrono);
    this.forceUpdate();
  }
  
  formatar(t) {
    return t < 10 ? '0' + t.toString() : t.toString();
  }

  zerarRelogio() {
    this.pararRelogio();
    this.setState({segundos: 0, minutos: 0, horas: 0});

    if (this.state.voltas.length > 0) {
      this.state.voltas.push(' ────── \n');
    }
  }

  render() {
    let background = require('./src/images/ocean.jpg');
    var txtH = this.formatar(this.state.horas);
    var txtM = this.formatar(this.state.minutos);
    var txtS = this.formatar(this.state.segundos);

    return (
      <View>
        <ImageBackground
          source={background}
          style={{width: '100%', height: '100%'}}>
          <Header titulo="Stopwatch();" subtitulo="Em função do tempo" />

          <Text style={tempo.texto}>
            {txtH}:{txtM}:{txtS}
          </Text>

          <View style={tempo.bloco}>
            <TouchableOpacity
              style={tempo.btn1}
              onPress={
                this.state.ativo ? this.pararRelogio : this.iniciarRelogio
              }>
              <Text style={tempo.txtBtn}>
                {this.state.ativo ? 'Pausa' : 'Começar'}
              </Text>
            </TouchableOpacity>
            <TouchableOpacity style={tempo.btn2} onPress={this.marcarVolta}>
              <Text style={tempo.txtBtn}>Marcar Volta</Text>
            </TouchableOpacity>
            <TouchableOpacity style={tempo.btn2} onPress={this.zerarRelogio}>
              <Text style={tempo.txtBtn}>Zerar</Text>
            </TouchableOpacity>
          </View>

          <ScrollView>
            <View style={registro.bloco}>
              <Text style={registro.texto}>{this.state.voltas}</Text>
            </View>
          </ScrollView>
        </ImageBackground>
      </View>
    );
  }
}

export default App;

Answer 1

hello, good is just you use the map, it receives two parameters o item which in this case is the return and index which is the index of the current element that is inside an array

example:

 this.state = {
      voltas: [],
 };

 render() {
    return (
       <ScrollView>
            <View style={registro.bloco}>

              {this.state.voltas.map((volta, index)=> (
                  <View  key={volta}>
                    <Text> {index + 1}</Text>
                     <Text style={registro.texto}>
                       {volta}
                    </Text>
                  </View>
              ) )}  

            </View>
          </ScrollView>
    )
  }

well I hope I helped:)