Q: Render array of strings in react js

Question

I have an array of strings and I'm trying to render it inside a component with react js

this array of comments is inside my Posts

comentarios = ["test1", "test2", "test3","test4"] note: I'm taking this array from firebase documents

I can render it but I have a problem. when I render by map () this array returns me all the items in a single line. I researched some resolutions for this problem here in the community and on google, I found this topic: How to display an array of strings in react component

even so, I was unable to resolve it definitively.

my question is: how do i return each index of the array within its own paragraph?

constructor(props) {
    super(props);
    this.state = {
      Posts: [],
    }

 <div className="text-comentarios">    
     {this.state.Posts.map( (itens,index) =>{
         <div>
           <p key={index}> {itens.comentarios} </p>
         </div>
       )
       })}
 </div>

I am have the return of this map as follows:

Coments: test1test2test3test4

how do i get this return, example:

Coments: test1
Coments: test2
Coments: test3
Coments: test4

kkesley · Accepted Answer · 2020-06-03 23:13:29Z

0

You can map the comments like you did with the posts

constructor(props) {
    super(props);
    this.state = {
      Posts: [],
    }

 <div className="text-comentarios">    
     {this.state.Posts.map( (itens,index) =>{
         <div>
           <div key={index}>
             {itens.commentarios.map((comment, commentIndex) => <p key={commentIndex}>{comment}</p> )}
           </div>
         </div>
       })}
 </div>

answered Jun 3, 2020 at 23:13

kkesley

3,4162 gold badges36 silver badges60 bronze badges

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

1 Comment

Joao Paulo Gardiano Over a year ago

thank you for giving me this help and taking time to help me

Steven · Accepted Answer · 2020-06-03 23:38:51Z

0

Maybe you have set display: inline or flex property in .text-commentarios or above parent class. Please remove that property to display as rows not inline. And you code containes )} at the end which is needless try to remove that and change code as below. And use span tag instead of p tag to display as inline in div element. And then you need to change code a little

{this.state.Posts.map( (itens,index) =>{
     <div key={index}>
         <span class="row-title"> Comments: </span>
         <span> {itens.comentarios} </span>
     </div>
  })
}

Hope this helps you to understand!

answered Jun 3, 2020 at 23:38

Steven

6677 silver badges19 bronze badges

1 Comment

Joao Paulo Gardiano Over a year ago

I will try this and then come back with feedback

Collectives™ on Stack Overflow

Q: Render array of strings in react js

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related