How to render components with array of objects in React

Question

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>

What is the expected/wanted output? Can you write the wanted output html after the render? — Chris
– Chris, Commented Mar 5, 2018 at 13:55
I have now set an exemple of output and structure of textContent — aurny2420289
– aurny2420289, Commented Mar 5, 2018 at 14:15
@aurny2420289 Do you want it to be like: <article> <p>Horn</p> <p>Cirque</p> <p>Glacier in Longitudinal Section</p> </article> ? — Amanshu Kataria
– Amanshu Kataria, Commented Mar 5, 2018 at 14:38

Harsh Makadia · Accepted Answer · 2018-03-06 05:27:22Z

1

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;

answered Mar 6, 2018 at 5:27

Harsh Makadia

3,4436 gold badges36 silver badges43 bronze badges

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

1 Comment

aurny2420289 Over a year ago

Thank you, it's the answer i was looking for. is it possible to apply this code to ReactDOM.render( <section>{finalStringMessage}</section>, document.getElementById('texte-image') ); ?

Collectives™ on Stack Overflow

How to render components with array of objects in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related