CODEWITHSUNDEEP
cssreactjs
user2597617
user2597617

Reputation: 111

How to display a list of items from a reactjs map loop horizontally with wrap?

I have a list of items (dynamically created buttons) coming from a reactjs map function. I want them listed horizontally and also allow wrapping remaining items to the next line if needed. Can some one please help with this. Given below is my code snippet.

return( <div>
            { relevantMessages.map(function(thisQuestion){
                return 
                       <p key={thisQuestion.id}>
                           <button key={thisQuestion.id} onClick={() => this.sendThisMessage(thisQuestion.question)}> 
                                {thisQuestion.title}
                           </button>
                       </p>
                 }, this)
             }
        </div>)

Upvotes: 1

Views: 1341

Answers (3)

Rajesh Kumaran
Rajesh Kumaran

Reputation: 201

You can use css to align horizontally.

For example:

return( <div>
            { relevantMessages.map(function(thisQuestion){
                return 
                       <p key={thisQuestion.id} style="display:inline-block;">
                           <button key={thisQuestion.id} onClick={() => this.sendThisMessage(thisQuestion.question)}> 
                                {thisQuestion.title}
                           </button>
                       </p>
                 }, this)
             }
        </div>)

Upvotes: 2

user2597617
user2597617

Reputation: 111

Using span tag instead of p tag in the above code snippet solved my issue.

Upvotes: 1

Tsuni
Tsuni

Reputation: 5808

This isn't really an issue with React, but more so with CSS.

What you are probably looking for is something such as flex-box. Check out css-tricks for a good tutorial on how to use it.

Or try flexbox-froggy for a gamified of learning it :)

Upvotes: 0

Related Questions