Iterate over array inside map function in react-native

Question

I have a function:

renderConversations(){
    let conversationContent = this.state.conversationArray.map((convObj, i) => {
      return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow]}>
        <Text style= {globalStyle.conversationText}>{ convObj.text }</Text>
        <Text style= {globalStyle.conversationText}>{ convObj.actionButtons }</Text>
      </View>                            
    })
    return conversationContent
  }

I'm rendering the component using this function depending on the state variable. A challenge I'm facing is convObj.actionButtons here is an array. I want to iterate over that inside the map function to build the component. Is there a way to do this inside the map function, or do I need to use the good old for loop?

yes, that will be the correct way, use another map and create the ui elements :) — Mayank Shukla
– Mayank Shukla, Commented Sep 8, 2017 at 7:23

Steve Holgado · Accepted Answer · 2017-09-08 07:31:12Z

4

You could use a second map but that can get messy.

How about using a separate function to return the second mapped array:

renderActionButtons(actionButtons) {
  return actionButtons.map(button => {
    // Return code here
  }
}

...and then use like this:

renderConversations() {
  let conversationContent = this.state.conversationArray.map((convObj, i) => {
    return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow]}>
      <Text style= {globalStyle.conversationText}>{ convObj.text }</Text>
      <Text style= {globalStyle.conversationText}>{ this.renderActionButtons(convObj.actionButtons) }</Text>
    </View>                            
  })
  return conversationContent
}

answered Sep 8, 2017 at 7:31

Steve Holgado

12.1k4 gold badges26 silver badges34 bronze badges

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

Comments

Mayank Shukla · Accepted Answer · 2017-09-08 07:31:48Z

Is there a way to do this inside the map function?

Yes that will be the correct way of creating the ui elements dynamically. Use map again and create the elements.

Check this example:

renderConversations(){
    let conversationContent = this.state.conversationArray.map((convObj, i) => {
        return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow]}>
            <Text style= {globalStyle.conversationText}>{ convObj.text }</Text>
            <Text style= {globalStyle.conversationText}>
                { 
                    convObj.actionButtons.map((el, j) => {

                        return /*Code*/

                    }) 
                }
            </Text>
        </View>                            
    })
    return conversationContent
}

do I need to use the good old for loop?

You can use that also but using map will be easy, because directly we can't use for loop inside JSX, so you need to create another function and put all the for loop logic inside that and call that function from map.

Like this:

renderConversations(){
    let conversationContent = this.state.conversationArray.map((convObj, i) => {
        return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow]}>
            <Text style= {globalStyle.conversationText}>{ convObj.text }</Text>
            <Text style= {globalStyle.conversationText}>
                { 
                    this._fun(convObj.actionButtons)
                }
            </Text>
        </View>                            
    })
    return conversationContent
}


_fun(item){
    //for loop here and return the elements
}

Collectives™ on Stack Overflow

Iterate over array inside map function in react-native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related