How the javascript array display result with new line

Question

Any hint or help would be greatly appreciated!! In imageList.js, the following {images} is an array. How can the return of an string "div" of an array return the below image:

return {images}

display this result like if there is a "\n" new line for each record?:

        import React from 'react';

    const ImageList = props => {
      const images =   props.images.map((image) => {
        return <img src={image.urls.regular} />
        });
        console.log(props.images)
        return <div>{images}</div>;
    }

    export default ImageList;

result:

Souad · Accepted Answer · 2021-01-02 01:52:35Z

1

for this you are creating img elements and depending on your css they are taking the entire container width. Solving this would require specifying image sizes for example

div{
display: grid;
grid-template-column: repeat(3, 1fr)
}

or

img{
width: 45%;
}

but in the end, it depends on your styling

answered Jan 2, 2021 at 1:52

Souad

513 bronze badges

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

Comments

KBT · Accepted Answer · 2021-01-02 02:45:51Z

0

Your images list is displayed correctly but you miss the css for it. you can use the GridList or gird system of material ui or you build your own design.

here is a sample

<GridList cellHeight={160} className={classes.gridList} cols={3}>
  {imagess.map((image) => (
  <GridListTile key={image.key} cols={image.cols || 1}>
     <img src={image.img} alt={image.title} />
  </GridListTile>
  ))} </GridList>

in the link below you can find more usefull information.

answered Jan 2, 2021 at 2:45

KBT

7795 silver badges10 bronze badges

Collectives™ on Stack Overflow

How the javascript array display result with new line

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related