CODEWITHSUNDEEP
javascripthtmlreactjs
js_248
js_248

Reputation: 2112

List of images in horizontal way using react.js

I am trying to create a list of images having text just below it. All images in this list should be horizontal. I am using this fiddle It is working fine without react.
But I want to do it in react as follows.

 a.subList.map((b) => (
                                    <figure id="figure">
                                        <ul>
                                            <li>
                                                <img src={b.imageUrl} />
                                                    <figcaption>{b.name}</figcaption>
                                            </li>
                                        </ul>

                                    </figure>
                                ))

where a.subList is in this form 

[{"imageUrl":"/acb","name":"cvb"},{"imageUrl":"/asdf","name":"cvbnm"}]

But using react function it is not showing in horizontal direction.

Upvotes: 0

Views: 14214

Answers (1)

Abdellah Stands with Gaza
Abdellah Stands with Gaza

Reputation: 5168

It's actually a styling issue, Here is the working fiddle. I chose flexbox to display the items horizontally, but you can choose something else.

 <div class="topContainer">

 </div>

and add the following css.

.topContainer{
  display: flex;
  flex-direction: row;
}

Note about browser support: It's actually safe to use it. (97% support worldwide)

Upvotes: 11

Related Questions