CODEWITHSUNDEEP
javascriptloopsreact-nativematch
Vincent
Vincent

Reputation: 795

React-Native Accumulate results from a loop to a single string

I want to extract the data in between the tag and, based on the content, return <View><Text>This is a Text</Text></View> or <View><Text>This is a Picture</Text></View>

The problem is that I don't know how to accumulate the result from the matches to Article, and then return {Article} as the final result.

In the case below, I should end up with that render: 

<View><Text>This is a Text</Text></View>
<View><Text>This is a Picture</Text></View>
<View><Text>This is a Text</Text></View>

instead, I get the final result. I tried Article = Article + <View><Text>This is a Text</Text></View> and Article += <View><Text>This is a Text</Text></View> but they both failed.

export default class App extends React.Component {
  render() {

let pattern = /<RNVW>(.*?)<\/RNVW>/g;
let str =   '<RNVW><p>Markets are mixed in Asia, with Japan\'s benchmark slipping 0.7% after the government reported the economy contracted in the last quarter</em></p><p>BANGKOK -- Markets were mixed in Asia on Monday, with Japan\'s benchmark slipping 0.7% after the government reported the economy contracted 6.3% in annual terms in the last quarter. China\'s shares got a boost after the central bank stepped in to help the economy with a rate cut, extra buying of securities and tax cuts. </p><p>The Nikkei 225 in Tokyo closed at 23,523.24, while Sydney\'s S&P ASX/200 edged 1% lower to 7,125.10.</p></RNVW><RNVW><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/04/1493235373large_react_apps_A-01.png"></RNVW><RNVW><p>Such moves will likely be followed by still more, said Julian Evans-Pritchard, given that many of the companies worst affected by the virus outbreak are smaller ones that lack access to loans from major state-run banks. </p><p>The government has also announced plans for tax cuts and other measures to help companies struggling with shut-downs of cities and plunging consumer spending and travel. </p><p>"We think the PBOC will need to expand its re-lending quotas and relax constraints on shadow banking in order to direct more credit to struggling SMEs," Evans-Pritchard said in a commentary. </p><p>Wall Street closed out a wobbly day of trading Friday with the major stock indexes notching their second straight weekly gain. Though trading was mostly subdued and cautious following China\'s report Thursday of a surge in cases of a new virus that raised fresh concerns about global economic growth.</p></RNVW>';

    let match;
    let Article; 
    while ((match = pattern.exec(str)) !== null) {
      if (match[1].startsWith("<p>") !== false) {
       Article = (
        <View><Text>This is a Text</Text></View>
        );
      } else {
      Article = (
           <View><Text>This is a Picture</Text></View>
        );
      }
    }

    return (
      <View style={styles.container}>
     {Article}
      </View>
    );
  }
}

Upvotes: 0

Views: 120

Answers (1)

Dinesh R Rajput
Dinesh R Rajput

Reputation: 750

Hey Vincent

you were doing one mistake with Article, you are trying to allocate a new item to Article every time instead, you should go with array and push new items every time in the array.

Made some changes in your code:

class App extends Component {

articleView = () => {

let pattern = /<RNVW>(.*?)<\/RNVW>/g;
let str ="<RNVW><p>Markets are mixed in Asia, with Japan's benchmark slipping 0.7% after the government reported the economy contracted in the last quarter</em></p><p>BANGKOK -- Markets were mixed in Asia on Monday, with Japan's benchmark slipping 0.7% after the government reported the economy contracted 6.3% in annual terms in the last quarter. China's shares got a boost after the central bank stepped in to help the economy with a rate cut, extra buying of securities and tax cuts. </p><p>The Nikkei 225 in Tokyo closed at 23,523.24, while Sydney's S&P ASX/200 edged 1% lower to 7,125.10.</p></RNVW><RNVW><img src=\"https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/04/1493235373large_react_apps_A-01.png\"></RNVW><RNVW><p>Such moves will likely be followed by still more, said Julian Evans-Pritchard, given that many of the companies worst affected by the virus outbreak are smaller ones that lack access to loans from major state-run banks. </p><p>The government has also announced plans for tax cuts and other measures to help companies struggling with shut-downs of cities and plunging consumer spending and travel. </p><p>\"We think the PBOC will need to expand its re-lending quotas and relax constraints on shadow banking in order to direct more credit to struggling SMEs,\" Evans-Pritchard said in a commentary. </p><p>Wall Street closed out a wobbly day of trading Friday with the major stock indexes notching their second straight weekly gain. Though trading was mostly subdued and cautious following China's report Thursday of a surge in cases of a new virus that raised fresh concerns about global economic growth.</p></RNVW>";

let match;
let Article = [];
while ((match = pattern.exec(str)) !== null) {
  if (match[1].startsWith("<p>") !== false) {
    Article.push(
      <View>
        <Text>This is a Text</Text>
      </View>
    );
  } else {
    Article.push(
      <View>
        <Text>This is a Picture</Text>
      </View>
    );
  }
}
return Article;

};
render() {
  return (
   <View>
    {this.articleView()}
  </View>
  );
 }
}

it will give you desired output :)

I hope that's what you were looking for!

Thanks!

Upvotes: 3

Related Questions