CODEWITHSUNDEEP
javascriptreactjs
claudiopb
claudiopb

Reputation: 1090

How to break lines in dynamic content in ReactJS?

I Have a dynamic content rendered from React JS that generates a follow HTML: 

<a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

<a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

//...successively

I would like to render these links from 4 to 4 separated with line break <br/> like this example bellow:

<a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

<a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

<a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

<a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

<br/> // <--- LINE BREAK

<a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

// ,,,successively

Here is a part of my component ReactJS code. Only the part of the code responsible for rendering is shown. The HTML renderization is working succefully.

render() {
    return (
      <div>
        {this.state.interiores.map(item =>
          <div>
            <div className="gallery">
              {
                item.fotos
                  .map(foto => {
                    return (<a href={`../images/${foto}.jpg`}
                      <img src={`../images/${foto}_thumb.jpg`} alt="" />
                    </a>
                    ) 
                  })
              }
            </div>
          </div>
        )}
   }

How can I solve it? Thank you

Upvotes: 0

Views: 577

Answers (3)

Ferit
Ferit

Reputation: 9657

Instead of

this.fotos.map(foto =>   .....

use

this.fotos.map((foto, index) =>   .....

to get the map iterator.

Then insert the following ternary operator after anchor tag:

.....
</a>
{index % 4 == 0 ? <br/> : <div></div>}

Which will conditionally insert br tag.

You can organize your code like this:

stackoverflow = () => {
  let fotos = [];
  let interiors = [];

  const gallery = (item) => item.fotos.map((foto, index) =>
    <div className="gallery">
      <a>
        <img>
        </img>
      </a>
      {index%4 == 0 ? <br/> : <div></div>}
    </div>
  )

  return(
    <div>interiors.map(item => gallery(item))</div>
  )
}

Upvotes: 1

Hemadri Dasari
Hemadri Dasari

Reputation: 33994

A simple way is 

render() {
  let items = [];
  let images = [];
  this.state.interiores.map((item, i) => {
    item.fotos.map((foto, i1) => {
      images.push(<a key={i1} href={`../images/${foto}.jpg`}
        <img src={`../images/${foto}_thumb.jpg`} alt="" />
      </a>);
    });
    items.push(<div key={i} className="gallery">
      {images}
    </div>);
    items.push(<br />);
  });
  return (
    <div>{items}</div>
  )
}

Upvotes: 0

K K
K K

Reputation: 18099

If your end target is to give a break after every 4th anchor irrespective of a br tag, try this CSS rule:

a:nth-child(4n+4) {
  margin-bottom: 10px;
}


a:nth-child(4n+4) {
   margin-bottom: 10px;
 }

a {
  border: 2px solid green;
  display: block;
  padding: 10px;
  background: gray;
}/*This rule is only for visual representation*/
<div>

  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>


  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>
  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>


  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>
</div>

Upvotes: 1

Related Questions