javascript - React render array of objects in cells of Bootstrap grid

Question

I have an array of components and I want to render each element in a different cell. The length of the array can be always different and can be more then 12 elements that are the limit of the cells in the Bootstrap grid system. So if the elements are more then 12 I need to create a new rows.

In my RENDER method I have this:

let components = this.state.elements.map(
  (currElement, index) => this.renderElement(currElement, index)
);
return (
  <div className="wrap-content container-fluid">
      <section id="box-main" className="container-fluid">
          <div className="row flex-items-xs-center">
            <div className="col-xs">
                <header>
                  <h4>{this._title}</h4>
                </header>
            </div>
          </div>   
            {components}  
      </section>
  </div>);

The method renderElement now render each element in a row, but I want to render in a cell but I don't know how to do. The ElementItem is a component that render the single element.

renderElement(element, index)
{
  return(
    <div key={index} className="row flex-items-xs-center">
        <div  className="col-xs">
          <ElementItem element={element} propA={element.propA} template={2} />
        </div>
    </div>
  );
}

标签： javascriptreactjstwitter-bootstraprenderjsx

Answer 1

Christian, I'm not sure if I understood your question. But if you want each element rendered in a column(cell) you must declare your components inside row and then specify the breakpoints. Something like this:

const MainComponent = props =>{
    const elements = elements.map(element =>{
        return(<div className="col md-4"> {element} </div>);
    })
    return(
        <div className="row">
           {elements}
        </div>
    )
}