如何在 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>

Answer 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;