CODEWITHSUNDEEP
javascriptreactjs
aurny2420289
aurny2420289

Reputation: 491

How to render components with array of objects in React

To setup my issue: I want to sort a text-document with regions of texts. the structure of data is: 

{"words": ["Horn ", "Cirque ", "Glacier in Longitudinal Section "] }
{"words": ["my other ", "line ", "of texts"] }

inside an array. The result must be rendered in React using a webComponent for each sentence:

textContent.map((sentences, index) =>
              <article>
               <desc-sentence>{sentences}</desc-sentence>
              </article>

          )

textContent is the variable containing each sentence in regions.

but Objects are not valid as Children in react. An array is way recommanded, how to pass array with indexes ?

*Edit

the output shoud be 

let textContent = [
     {"words": ["Horn ", "Cirque ", "Glacier in Longitudinal Section "]},
     {"words": ["V-shaped valley ", "carved by a river "]}
]

console.log(textContent[0].words);
<section>
<!-- inside the textContent loop of words-->
<article>
  <p>{sentence}</p>  
  <p>{sentence}</p>
 </article>
 <article>
  <p>{sentence}</p>  
  <p>{sentence}</p>
 </article>
</section>

Upvotes: 1

Views: 128

Answers (1)

Harsh Makadia
Harsh Makadia

Reputation: 3443

Here is the same code based on your requirement.You can check the HTML structure I think it's mostly what you want tag has all the names wrapped it in 

import React from 'react'
class TestJS extends React.Component {
    render(){
        let textContent = [
            {"words": ["Horn ", "Cirque ", "Glacier in Longitudinal Section "]},
            {"words": ["V-shaped valley ", "carved by a river "]}
        ];
        
        let finalStringMessage = [];
        let textContentLength = textContent.length;
        for(let i=0; i < textContentLength; i++){
            let wordsArray = textContent[i].words;
            let articleName = wordsArray.map((sentences, index) =>
                    <desc-sentence>{sentences}</desc-sentence>

            );
            finalStringMessage.push(<article>{articleName}</article>)
        }
        return(
            <div>{finalStringMessage}</div>
        )
    }
}

export default TestJS;

Upvotes: 1

Related Questions