React Native - CSS :last-child without a border?

Question

In React Native, I have a static array of books that I map over and output in stacked rows like this:

return books.map((book, i) => {   return(     <View style={styles.book} key={i}>       <Text style={styles.book}>{book.title}</Text>     </View>   ); }); 

I also have a bottom border on each book via styles.book:

book: {   borderBottomWidth: 1,   borderBottomColor: '#000000' } 

I need the last book in the list to NOT have a bottom border, so I'll need to apply borderBottomWidth: 0 to it I think? In React Native, how can I get the last book in the list to not have that bottom border? (In normal css we'd use last-child)

Answer 1

You could achieve this using some logic:

return books.map((book, i) => {   return(     <View style={ (i === books.length - 1) ? styles.noBorderBook : styles.book} key={i}>       <Text style={(i === books.length - 1) ? styles.noBorderBook : styles.book}>{book.title}</Text>     </View>   ); }); 

What this does is check if i, the iterator, is equal to the books array's length - 1.