Loop and render elements not working in React-native

Question

I couldn't understand why it is not working. It is showing me error cannot find name 'contentItem'. Any suggestions ?

const CONTENT = [ { title: 'Лицевой счет 256215492543', sub_title: 'ул.Неизвестная, 78/9,', count: true }, { title: 'Лицевой счет 12356215492543', sub_title: 'ул.Неизвестная, 72/7,', count: false }, .... renderContent(section, _, isActive, CONTENT) { return ( CONTENT.map(contentItem => ( if (contentItem.special) { return( <View> <Text>{contentItem.title} spec</Text> </View> ) } return( <View style={{backgroundColor:'red'}}> <Text>{contentItem.sub_title} </Text> </View> ) });

Basic idea, is to show TITLE if "count" is TRUE, if "count" false show SUB_TITLE

<Accordion activeSections={activeSections} sections={CONTENT} touchableComponent={TouchableOpacity} expandMultiple={true} renderHeader={this.renderHeader} renderContent={this.renderContent} onChange={this.setSections} /> — Jasur Kurbanov
– Jasur Kurbanov, Commented Oct 25, 2019 at 11:29

Lenoarod · Accepted Answer · 2019-10-25 11:46:57Z

I change the map function, in the js array map function, it will have three arguments, you can look at the API about map

const CONTENT = [ { title: 'Лицевой счет 256215492543', sub_title: 'ул.Неизвестная, 78/9,', count: true }, { title: 'Лицевой счет 12356215492543', sub_title: 'ул.Неизвестная, 72/7,', count: false }, renderContent(section, _, isActive, CONTENT) { return ( CONTENT.map((item,index)=> { if (item.count) { return( <View key={index}> <Text>{item.title} spec</Text> </View> ) } return( <View key={index} style={{backgroundColor:'red'}}> <Text>{item.sub_title} </Text> </View> ) }};

What has changed here? Have you fixed the code? Please include an explanation of what this answer achieves
add key prop to <View> because you are rendering it in a map function. otherwise it will throw a warning.
@Jasur Kurbanov the second parameter is not needed, I only want to show it arguments

Collectives™ on Stack Overflow

Loop and render elements not working in React-native

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related