Combining loop results into a single string using React-Native

I need help extracting the content within the <RNVW> tag and returning either

<View><Text>This is a Text</Text></View>
or
<View><Text>This is a Picture</Text></View>
based on the extracted data.

The issue I'm facing is how to accumulate the results from the matches to Article and then return {Article} as the final output.

In the example provided below, the expected render should be:

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

However, I am not getting the desired result. I have attempted using

Article = Article + <View><Text>This is a Text</Text></View>
and
Article += <View><Text>This is a Text</Text></View>
, but both approaches have 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>
    );
  }
}

Answer №1

Hello Vincent

Vincent, I noticed a mistake in your code concerning the handling of the Article. Instead of allocating a new item to Article each time, you should use an array and push new items into it every time.

I have made some changes to 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 ...

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>
  );
 }
}

Following these modifications will give you the desired output :)

I hope this resolves your issue!

Thank you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I must utilize the row variable obtained from my controller in order to transmit it to another controller using Ajax

When displaying a menu of categories and products for an authenticated user, I encountered a problem with the search bar. Despite wanting only certain categories/products to be displayed, the search bar was fetching products from all categories. To address ...

Creating stunning visuals with the power of SVG

I need to create a graphics editor similar to Paint using SVG for a school project. I have JavaScript code for drawing shapes like circles and lines, but when I try to add them to an onClick function for a button, it doesn't seem to be working. funct ...

Is it possible to nest Route components in react-router version 4.x?

How can one properly implement nested routes in react-router version 4.x? Previous methods like the one below worked well, but upgrading to version 4.x now results in a warning... <Route path='/stuff' component={Stuff}> <Route path=&a ...

Saving the output of mySQL queries on the client side for later use in subsequent requests

While logging a user in, I transfer attributes through a response object. In the javascript, I store specific attributes to a variable for future usage. For example, onresponse - currentUser = req.body.user currentID = req.body.id etc. Later, if I need t ...

Creating dynamic buttons with event listeners and parameters in JavaScript using jQuery

I am attempting to dynamically create and append buttons to an HTML page with defined events using the following code: var mdata = JSON.parse(data); mdata.forEach(function(k) { $("#routesPage").append("<button class='accordion' onclick=&a ...

How to invoke a Struts 2 action synchronously using JavaScript

I've been attempting to use JavaScript to make a synchronous call to a Struts 2 action. Despite finding multiple examples, none of them have worked for me. The only method that has worked so far is making an asynchronous call like this: function togg ...

Can you clarify the purpose of response.on('data', function(data) {}); in this context?

I am curious about the inner workings of response.on("data"). After making a request to a web server, I receive a response. Following that, I utilize response.on("data" ...); and obtain some form of data. I am eager to uncover what kind of data is being p ...

What is the process for inserting additional information into a geoJson file?

In the "gj" object, I need to add new properties from the "dataToAdd" array. The current format of "gj" is as follows: const gj = { "type": "FeatureCollection", "features" : [ { "type": "Feature", "geometry": { ...

Formatting specific elements within an array

I am working with an array of names, some of which are repeated. These names are then split in half and displayed as li. One thing I am struggling to figure out is how to style the name Joeyc with text-decoration: line-through; on all instances of .book w ...

including a close button when in use and excluding it when not in use

Seeking assistance with removing the "close" icon if it is not active. Here is the code I currently have $("#mason2 li div").click(function() { $(this).parent().hide().appendTo("#mason2").fadeIn(200); $(this).append('<p class="close"& ...

Viewing CSV Headers with PapaParse Plugin

I am currently utilizing the PapaParse plugin to handle CSV files. I have implemented a function that generates a table for displaying the results extracted from the CSV file. function processFile(evt) { var document = evt.target.files[0]; Papa.parse(doc ...

Control the appearance of your Angular UI-Grid by dynamically adjusting the CSS style as the page size changes

How can I dynamically change the CSS style when the page size is adjusted in Angular UI-Grid? In my use case, I need to display edit/delete options in grey color based on the type of user logged in. The ng-disabled directive is set based on the "row.entit ...

Adjusting element placement on collapsed navbar using Bootstrap

I've been developing a navbar for a webpage and have successfully aligned the data left and right with the Brand in the center. However, when the navbar collapses, the alignment shifts to Left (over) Brand (over) Right. I want the Brand to remain at t ...

BufferGeometry-based Three.js mesh fails to display

Currently, I am in the process of developing a WebGL game using Three.js. In order to enhance performance, I have made the decision to transition from using THREE.Geometry to utilizing THREE.BufferGeometry. However, after making this change, I encountered ...

Encountering difficulties in the installation of a package within Next JS

Can anyone assist me with this issue I'm facing while trying to install styled-components on Next JS? I keep getting an error after entering npm install --save styled-components: npm ERR! Unexpected end of JSON input while parsing near '...ry.np ...

Tips for showing informational text when the dialogue box is open

When I open my help dialog, the information texts are not displayed right away. They only appear when I click on the subsection. Is there a way to show them as soon as the dialog box is opened? Any suggestions or assistance would be greatly appreciated. H ...

Polymorph 1.0 - Using CSS Class Binding for Dynamic Properties

I attempted to link a CSS Class to a paper-progress element using the value of my property to change the item's color. I referenced Polymer's example on GitHub and studied the documentation on Data-binding. Here is my code: http://jsbin.com/bide ...

In JavaScript, what do we call the paradigm where a variable equals a variable equals a function? Let's take

Feeling a bit overloaded at the moment, so forgive me if this question seems too simple. I managed to accidentally write some code in Jest for testing a Vue application that actually works: const updateMethod = wrapper.vm.updateMethod = jest.fn() expect(u ...

Creating a custom directive for input validation in Angular

I am currently working on building a basic custom directive in AngularJS to validate if the user input is an integer or not. When the user types in an integer, I want an error message to display at the bottom that states "integers are not allowed". Do yo ...

Utilize styled-components in next.js to import and resize .svg files seamlessly

I have been attempting to import .svg files into my next.js project, but I have not had any success. I tried importing the .svg files the same way as in my React project by creating a typing.d.ts file and importing the svg as a component. However, it did ...