how do i generate a line break inside a loop in react?

Question

I have a react component that i need to break into lines. It generates 4-5 boxes of li's in a looped return i'm guessing. What I want to do is have 2 boxes on top, and then 3 below it. So if there are 4 boxes, they will be stack 2x2 on top of each other. If there are 5, 2 on top, 3 on the bottom.

So the question is, how do i generate a line break in a looped return in react?

code:

import React from 'react'
import classnames from 'classnames'

export default class Tile extends React.Component {
 constructor( props ) {
  super( props )
}

componentWillAppear( done ) {
// let rotateZ = `rotateZ( ${ ~~( ( Math.random() * -20 ) + 
Math.random() * 40 ) }deg )`
// let rotateX = `rotateX( ${ ~~( Math.random() * 80 ) }deg )`
// let scale = `scale( ${ .65 + Math.random() * .25 } )`
// let initialTransform = {
//   transform: `${ rotateZ } ${ rotateX } ${ scale }`
// }
// this.refs.container.style.transform = `${ rotateZ } ${ rotateX } ${ 
scale }`

this.refs.container.classList.add( 'Tile--isAppearing' )
done()
}

componentDidAppear() {
setTimeout( () => {
  // set visible and clear jitter
  this.refs.container.classList.remove( 'Tile--isAppearing' )
  this.refs.container.style.transform= ''
}, Math.random() * ( this.props.number * 250 ) )
}

onClick = event => {
const { id, value } = this.props
this.props.onClick( id, value )
}

render() {
// Add matrix jitter

let classes = classnames({
  'Tile': true,
  'Tile--isSelected': this.props.selected
})

return (

  <li ref="container" className={ classes } onClick={ this.onClick }>
    <span className="Tile-content">{ this.props.text }</span>
  </li>

)
  }
}

Second set of code requested:

render() {
let tiles = this.props.slide.answers
  .map( ( answer, index ) => {
    let id = 'answer' + index
    return <Tile
      key={ id }
      id={ id }
      value={ answer.value }
      text={ answer.text }
      selected={ this.selected.has( id ) }
      onClick={ this.onTileClick }
    />
  })

 let buttonClasses = classnames( 'Btn', 'Btn--isOrange', 'Btn--
 isContinue', {
  'u-transparent': !this.state.complete
})

   return (
  <div ref="main" className="js-main State">
    <p className="Question-Body">
      { this.props.slide.body }
    </p>
    <TransitionGroup { ...transitionProps } >
      { tiles }
    </TransitionGroup>
    <button ref="continue" className={ buttonClasses } onClick={ 
  this.onContinue }>{ this.props.slide.continue }</button>
  </div>
  )
  }

Answer 1

You need to manually insert the line break:

let tiles = this.props.slide.answers
  .map( ( answer, index ) => {
    let id = 'answer' + index
    let tile = <Tile
      key={ id }
      id={ id }
      value={ answer.value }
      text={ answer.text }
      selected={ this.selected.has( id ) }
      onClick={ this.onTileClick }
    />
    return index == 1 ? [tile, <br/>] : tile;
  })

This will turn [tile, tile, tile, tile] into [tile, [tile, <br/>], tile, tile]