homerboy homerboy - 3 months ago 16
Javascript Question

Limit number of buttons per row

I have 6 buttons that I'd like to render on my web page.

enter image description here

I'm mapping through an object of arrays in a JSON file through

map()


template(x) {
return (
<div>
<Button bsStyle="primary"></Button>
</div>
)
}

render() {
return (
<div className="row">
{_(this.props.data).map((x) => this.template(x))}
</div>
)
}


How can I limit each line to only have 3 buttons, instead of having however many it takes until it's forced to go down to the next line? I thought of just splitting up my the object arrays in the JSON file to two separate object arrays, so I can just make two
map()
calls? There seems to be a better and easier solution.

Answer

Split the whole array into chunks (smaller arrays each of which contains only 3 elements) and push those arrays into arrayOfChunks (array of arrays) then, in the render function:

{arrayOfChunks.map(this.templateChunk)}

and the method:

templateChunk(chunk) {
    return (<div className="row">
            chunk.map(this.template)
    </div>)
}
Comments