How to generate <Text /> component in loop using react native?

Question

I would like to know how can I can generate components from a variable which stores an array of strings, with a loop (or something similar). For example, I have an array:

const arr = ['Hello', 'Awesome', 'Stack','Over','Flow', 'Have', 'A', 'Nice', 'Day'];

and I wrote this method:

function renderT() {
  return arr.map(obj => {
    <Text>{obj}</Text>;
  });
}

and I then call it in the return statement of my render() method:

return (
  <View style={styles.row}>{renderT()}</View>
)

As result I don't have any error or text on the screen. I tried to use different kind of loop for, forEach, map and it didn't work. Could you please point me or suggest me the right way how can I implement it?

The map function should have a return value. Did you try return arr.map(obj => return { <Text>{obj}</Text>; }); — Mahdi N
– Mahdi N, Commented Apr 15, 2020 at 7:55
You are almost there: 1. in renderT, where is arr defined? 2. replace the curly braces in the map function so it will actually return something 3. add a key prop to each Text — MorKadosh
– MorKadosh, Commented Apr 15, 2020 at 7:55

Dacre Denny · Accepted Answer · 2020-04-15 08:35:44Z

2

There are some a subtleties to be aware of that if missed, will be causing errors and/or unexpected behaviour. Consider the following adjustments to your code, which should address the run-time errors:

function renderT() {

  // Ensure arr is defined in scope of, or is "visible" to, renderT()
  const arr = ['Hello', 'Awesome', 'Stack','Over','Flow', 'Have', 'A', 'Nice', 'Day'];

  return arr.map((obj, index) => {
    // Compose a unique key for the text element. A unique key is need when 
    // rendering lists of components
    const key = index;

    // Add return to ensure the text element is returned from map callback
    return <Text key={key}>{obj}</Text>;
  });
}

Something to be aware of is the key prop - this should be supplied for components that are rendered in a list (ie, <Text> in your case).

The reason for the key prop being needed is detailed here. Each key per item rendered must be unique - generally you should avoid using the index of a mapping callback, however seeing the uniqueness of values in arr cannot be guaranteed, it would be necessary.

Hope that helps!

edited Apr 15, 2020 at 8:35

answered Apr 15, 2020 at 8:12

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

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

1 Comment

Dacre Denny Over a year ago

@MatzHeri you're very welcome - all the best with your project :)

Simon · Accepted Answer · 2020-04-15 08:07:34Z

1

You should replace

function renderT() {
  return arr.map(obj => {
    <Text>{obj}</Text>;
  });
}

by this:

function renderT(arr) {
  return arr.map(obj => {
    return <Text>{obj}</Text>;
  });
}

and this:

return (
  <View style={styles.row}>{renderT()}</View>
)

by this:

return (
  <View style={styles.row}>{renderT(arr)}</View>
)

The two errors were the missing return and the missing argument in your function renderT. Then you have to call your function with the right argument (your array).

answered Apr 15, 2020 at 8:07

Simon

6,5308 gold badges55 silver badges110 bronze badges

Comments

Orlyyn · Accepted Answer · 2020-04-15 08:11:59Z

1

Your map function on your arr is not returning anything, that's why you're not visioning any texts.

Try to replace your function renderT() by:

function renderT() {
  return arr.map(obj => (<Text>{obj}</Text>));
}

(just replace the {} around your <Text /> value by ())

answered Apr 15, 2020 at 8:11

Orlyyn

2,6222 gold badges25 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to generate <Text /> component in loop using react native?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related