I have a react component that I need to format into multiple lines, specifically having 2 boxes on top and 3 below in a looped return. The desired layout is to stack the boxes in 2x2 or 2x3 depending on the total number of boxes generated by the loop.
So, my question is, how can I add line breaks within a looped return in React?
Here is the code snippet:
import React from 'react'
import classnames from 'classnames'
export default class Tile extends React.Component {
constructor( props ) {
super( props )
}
componentWillAppear( done ) {
// Animation logic here
}
componentDidAppear() {
// Transition effect implementation
}
onClick = event => {
// Click event handling
}
render() {
// Render method for generating tiles
return (
<li ref="container" className={ classes } onClick={ this.onClick }>
<span className="Tile-content">{ this.props.text }</span>
</li>
)
}
}
Another requested code snippet:
render() {
// Rendering method for creating tiles dynamically
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>
<button ref="continue" className={ buttonClasses } onClick={
this.onContinue }>{ this.props.slide.continue }</button>
</div>
)
}