I am attempting to create a layout that includes text, a line, and a button similar to the design in this image: https://i.sstatic.net/RgGFU.png Although my code functions correctly, the CSS styling is not quite right:
{ retrospectives.size > 0 &&
<div className='c-division-line u-margin-bottom'>
<h3>
<span> Last Retrospectives </span>
</h3>
</div>
}
{ retrospectives.size > 4 &&
<div className="c-division-line__button u-font-size--12px">
<RetroLink project={projectId} path={path}/>
</div>
}
However, when I attempt to nest one block of code within another for correct CSS styling, the functionality breaks. How can I achieve both proper CSS and functioning code?
{ retrospectives.size > 0 &&
<div className='c-division-line u-margin-bottom'>
<h3>
<span> Last Retrospectives </span>
</h3>
{ retrospectives.size > 4 &&
<div className="c-division-line__button u-font-size--12px">
<RetroLink project={projectId} path={path}/>
</div>
}
</div>
}
I considered creating a separate function, but it did not yield the desired results:
buttonLink () {
const { retrospectives, projectId, path } = this.props
if (retrospectives.size > 4) {
return <div className="c-division-line__button u-font-size--12px">
<RetroLink project={projectId} path={path}/>
</div>
}
}
And calling it like this {this.buttonLink()}