Render an array nested in an array

Question

How do I show the array which is nested in an array?

Code:

this.props.posts :

[
  {"id":1, "name": "name01", "tags":["tag1, tag2, tag3, tag4"]},
  {"id":2, "name": "name02", "tags":["tag2, tag4"]}
]

The way I'm trying to show is:

renData () {
  const { posts, tags } = this.props.posts
  return posts.map((key, idx) => {
    return (

        <View key = {idx}>
          <Text style={{fontSize:18}}>      // <= This works if tags not mapped
              { key.id } - { key.name }
          </Text>

        /*     
               tags.map((keyTag, idp) => {          //<= This does not work.
                    <View key = {idp}>           // <= idp not defined error.

                    <TouchableOpacity>

                     <Text> {keyTag} </Text>            // <= How to show the content.

                    </TouchableOpacity>

                   </View>
                 });
        */    

        </View>

      )
  });
}

I want to show the content of the tags on each line.

UPDATE1:

renData () {
  const { posts, tags } = this.props.tagPosts
  return posts.map((post, postIndex) => {
    return (
        <View key = {postIndex}>
          <View>
          <Text style={{fontSize:18}}>
              { post.id } - { post.name }
          </Text>
        {

               post.tags.map((tag, tagIndex) => {
                       <View key = {tagIndex}>           
                          <TouchableOpacity>
                              <Text> {tag} </Text>            
                           </TouchableOpacity>
                       </View>
                   })
             }
        </View>
      )
  });
}

I don't see anything wrong with your update 1. What error are you getting? — fubar
– fubar, Commented Sep 25, 2017 at 2:17

Andy Gaskell · Accepted Answer · 2017-09-25 01:08:52Z

2

tags.map((keyTag, idp) => {          //<= This does not work.

Should be

key.tags.map((tag, idp) => {

It would also be a good idea to use descriptive names - key is not very descriptive and makes it more difficult to follow. Try something like

posts.map((post, index) => {

Renaming key to post makes it a little more obvious that you need to access the tags property.

renData () {
  const { posts, tags } = this.props.posts
  return posts.map((post, postIndex) => {
    return (
        <View key = {postIndex}>
          <Text style={{fontSize:18}}>
              { post.id } - { post.name }
          </Text>
          {
               key.tags.map((tag, tagIndex) =>
                    <View key = {tagIndex}>           
                       <TouchableOpacity>
                           <Text> {tag} </Text>            
                        </TouchableOpacity>
                    </View>
                );
          }
        </View>
      )
  });
}

edited Sep 25, 2017 at 1:08

answered Sep 25, 2017 at 0:45

Andy Gaskell

31.8k6 gold badges79 silver badges84 bronze badges

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

4 Comments

Somename Over a year ago

Thanks. Tried that. Still nothing is showing in the app. If I remove the key.tags.map completely, it shows the posts

Andy Gaskell Over a year ago

Updated the answer - it should be close. Consider pulling the tags into its own component.

Somename Over a year ago

Updated the question with UPDATE1 please check. Still getting Error: tagIndex is not defined.

Somename Over a year ago

How would you separate the tags into another component?

Mohamed Khalil · Accepted Answer · 2017-09-25 02:03:44Z

you should do like that

renData () {
 const { posts } = this.props // take posts from props
 return posts.map((key, idx) => {
   const { tags } = key // take tags from key which is single post
  return (

    <View key = {idx}>
      <Text style={{fontSize:18}}>    
          { key.id } - { key.name }
      </Text>


           tags.map((keyTag, idp) => {          
                <View key = {idp}>          

                <TouchableOpacity>

                 <Text> {keyTag} </Text>            

                </TouchableOpacity>

               </View>
             });
    </View>

    )
  });
}

also your tags in post is not array

[
  {"id":1, "name": "name01", "tags":["tag1, tag2, tag3, tag4"]}, 
  {"id":2, "name": "name02", "tags":["tag2, tag4"]}
]

it should be

 [
   {"id":1, "name": "name01", "tags":["tag1", "tag2", "tag3", "tag4"]}, // notice the quotes on each tag not around all tags as it will one element in array
   {"id":2, "name": "name02", "tags":["tag2", "tag4"]}
 ]

Elumalai Kaliyaperumal · Accepted Answer · 2017-09-25 08:12:02Z

2

Return is missing in post.tags.map method

renData () {
const { posts, tags } = this.props.tagPosts
return posts.map((post, postIndex) => {
return (
    <View key = {postIndex}>
      <View>
      <Text style={{fontSize:18}}>
          { post.id } - { post.name }
      </Text>
    {
       post.tags.map((tag, tagIndex) => {
           return (
              <View key = {tagIndex}>           
                <TouchableOpacity>
                 <Text> {tag} </Text>            
                </TouchableOpacity>
              </View>
            )
       })
     }
    </View>
  )
});
}

answered Sep 25, 2017 at 8:12

Elumalai Kaliyaperumal

1,5301 gold badge13 silver badges24 bronze badges

Collectives™ on Stack Overflow

Render an array nested in an array

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related