Terminate a map loop in react native

Question

I'm attempting to break out of a loop, once I have found what I'm looking for, in this case a quote.

I know from using things like Java that it is in fact possible, however it is proving more difficult than I thought in RN. When I use a JS break, it simply says its a syntax error, is there any break statements in RN?

quotes.quotesArray.map((quote, i) => {
    if(!quote.isRead){
        return <Text key={i} style={styles.container, styles.quote}>{quotes.quotesArray[i].quotation}</Text>;                    
        break;
    } else {
       return 
    }
})

break is not avaiable in map loop, for that cases use for — jose920405
– jose920405, Commented Jan 25, 2017 at 12:48

Red Mercury · Accepted Answer · 2017-01-24 22:13:36Z

2

There is no way to prematurely break the Array.prototype.map. It looks like you want to render the first element matching the !quote.isRead predicate. If that is the case you can use Array.prototype.find to find the first unread quote and then render it if it exists.

var unreadQuote = quotes.quotesArray.find(quote => !quote.isRead)
render() {
  return (
    unreadQuote && 
    <Text style={styles.container, styles.quote}>{unreadQuote.quotation}</Text>;
  )
}

answered Jan 24, 2017 at 22:13

Red Mercury

4,3723 gold badges29 silver badges33 bronze badges

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

2 Comments

user2026178 Over a year ago

Mercuy It says that the break is an "Unsyntactic Break" - Does it mean there is a break statement that will work in React Native? Just curious

Red Mercury Over a year ago

The break statement in React Native is identical to the break statement as it is used in the browsers. It follows the same rules. Which means they are used in while and for loops and switch statements for example.

Eldelshell · Accepted Answer · 2017-01-24 22:27:04Z

1

I would do this with filter and map and move the render of the component to a function:

renderQuote(quote, i) {
    return (
        <Text key={i} style={styles.container, styles.quote}>
            {quote.quotation}
        </Text>
    );
}

// On JSX

{ quotes.quotesArray.filter((quote) => !quote.isRead).map((quote, i) => this.renderQuote(quote, i) }

answered Jan 24, 2017 at 22:27

Eldelshell

6,9908 gold badges47 silver badges64 bronze badges

Comments

Matt Aft · Accepted Answer · 2017-01-24 22:40:51Z

0

The problem is that you're return starts the next loop so it never hits the break, here is another way you could set this up. Edited to for loop from forEach for break to be valid.

const quote = [];
for ( let i = 0; i < quotes.quotesArray.length; i++) {
  if (!quote.isRead[i]) {
    quote.push(<Text key={i} style={styles.container, styles.quote}>{quotes.quotesArray[i]}</Text>);
    break;
  }
}

You could also use lodash's .find() method to filter the array and return the first element that returns true in your callback and use that data for your text element.

edited Jan 24, 2017 at 22:40

answered Jan 24, 2017 at 22:08

Matt Aft

8,9663 gold badges28 silver badges38 bronze badges

2 Comments

zerkms Over a year ago

break; cannot be used in that place.

Matt Aft Over a year ago

@zerkms yeah totally forgot you cant break outta forEach, it would have to be set up as a regular 'for loop' for the break to work

Collectives™ on Stack Overflow

Terminate a map loop in react native

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related