CODEWITHSUNDEEP
reactjs
jadeite1000
jadeite1000

Reputation: 659

How the javascript array display result with new line

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: enter image description here

Upvotes: 0

Views: 51

Answers (2)

KBT
KBT

Reputation: 779

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.

Upvotes: 0

Souad
Souad

Reputation: 51

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

Upvotes: 1

Related Questions