List of images in horizontal way using react.js

Question

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.

Abdellah Stands with Gaza · Accepted Answer · 2017-12-02 14:21:03Z

11

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)

edited Dec 2, 2017 at 14:21

answered Dec 27, 2016 at 9:40

Abdellah Stands with Gaza

5,1781 gold badge30 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

List of images in horizontal way using react.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related