Add elements to array consistently in react-native

Question

Today i want to create array in react-native and update it via hook to display elements on the screen in sequence. So the final result should be 0 1 2 3 4 My code so far

import React, { useState, useRef } from "react";
import { StyleSheet, Text, View, Button } from "react-native";

export default function App() {
  const [arr, setArr] = useState([]);
  function test() {
    for (var i = 0; i < 5; i++) {
      setArr([...arr, i]);
    }
  }

  return (
    <View style={styles.container}>
      <Text>{arr}</Text>
      <Button title="change next index" onPress={() => test()} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

But this shows me only the last elements of the array which is 4. How can i display all elements in sequence on the screen?

you need to display one by one or show it all

prasanth
– prasanth

2021-06-23 13:40:55 +00:00
Commented Jun 23, 2021 at 13:40 — prasanth
– prasanth, Commented Jun 23, 2021 at 13:40
@prasanth show it all

Nikola Marinov
– Nikola Marinov

2021-06-23 13:45:49 +00:00
Commented Jun 23, 2021 at 13:45 — Nikola Marinov
– Nikola Marinov, Commented Jun 23, 2021 at 13:45

Gulam Hussain · Accepted Answer · 2021-06-23 13:50:14Z

1

React state update is async. On surface it looks like you are updating state 5 times. but the state is being updated only once and when it get's update i value is already 4.

function test() {
  for (let i = 0; i < 5; i++) {
    setArr(prevState => [...prevState, i]);
  }
}

answered Jun 23, 2021 at 13:50

Gulam Hussain

1,81313 silver badges23 bronze badges

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

2 Comments

Nikola Marinov Over a year ago

ye... I got 05555 right now istead of 01234

Gulam Hussain Over a year ago

in loop use let instead of var

prasanth · Accepted Answer · 2021-06-23 13:49:17Z

0

You need iterate array with Array#map

Codesandbox Demo

 <View style={styles.container}>
      {arr && arr.map(a=>(<Text key={a}>{a}</Text>))}
      <Button title="change next index" onPress={() => test()} />
 </View>

And also better setArr call on after map instead of inside the loop. Check my demo link . Because each time call unnecessary render on the loop

function test() {
    let newArr = [...arr];
    for (var i = 0; i < 5; i++) {
      newArr.push(i);
    }
    setArr(newArr);
  }

answered Jun 23, 2021 at 13:49

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Comments

sschwei1 · Accepted Answer · 2021-06-23 14:04:59Z

0

You need to join all elements of the array

return (
  <View style={styles.container}>
    <Text>{arr.join(' ')}</Text>
    <Button title="change next index" onPress={() => test()} />
  </View>
);

or if you want to wrap each number in an own element

return (
  <View style={styles.container}>
    {
      arr.map(num => (<Text key={num}>{num}</Text>))
    }
    <Button title="change next index" onPress={() => test()} />
  </View>
);

To not have performance issues, react also waits for the end of a function call before re-rendering (and update states), so in your for loop, you always pass an empty array with the current index into the state

setArr(prev=> [...prev, i]);

will give you the current value here

edited Jun 23, 2021 at 14:04

answered Jun 23, 2021 at 13:46

sschwei1

4033 silver badges13 bronze badges

Collectives™ on Stack Overflow

Add elements to array consistently in react-native

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related