Nested map cannot render <Text> element from main loop

Question

I have a nested array of "credits"

const credits = [
  {
    id: 1,
    heading: 'Test Organisation',
    credits: [
      {id: 1, text: 'Joe Bloggs'},
      {id: 2, text: 'Jane Bloggs'},
    ]
  },
....
];

I am wanting to print each "header" in a <Text> element, and then subsequently each of their "credits" in a <Text> element.

I have looked at the following already answered questions on how to achieve this, but one is for ReactJS and uses HTML and the other that uses React Native outputs only the opening tag of a view:

I am being told there is a syntax error as it is expecting a close parentheses after the end of the first <Text> element.

Here is what I have:

render() {
    return (
        <ScrollView style={styles.container}>
          <View style={styles.centredHighlightHeaderWrapper}>
            <Text style={styles.centredHighlightHeader}>
              Credits
            </Text>
          </View>


          {
            credits.map(item => (
                  <Text style={styles.centredHeader}>{item.heading}</Text>#Unexpected token -- js error says expecting "," - phpstorm says expecting ")"

              {
                item.credits.map(credit => (
                    <Text style={styles.name}>{credit.text}</Text>
                ))
              }
            ))
          }

        </ScrollView>
    );
  }

TKoL · Accepted Answer · 2020-01-14 16:30:46Z

2

{
        credits.map(item => (
             <React.Fragment>
               <Text style={styles.centredHeader}>{item.heading}</Text>

               {
                item.credits.map(credit => (
                    <Text style={styles.name}>{credit.text}</Text>
                ))
                }
             </React.Fragment>
        ))
      }

You can't have adjacent react elements without a container. So I've put them both in a React.Fragment for you

answered Jan 14, 2020 at 16:30

TKoL

13.9k4 gold badges49 silver badges86 bronze badges

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

2 Comments

Adam Copley Over a year ago

I just came across the fragment in another element so nearly answered my own Q. You beat me to it, so you get the points :D

mlisonek Over a year ago

You could also do <> ... </> instead of <React.Fragment> ... </React.Fragment>

Collectives™ on Stack Overflow

Nested map cannot render <Text> element from main loop

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related