CODEWITHSUNDEEP
javascriptreactjstypescriptjsx
user8321027
user8321027

Reputation:

How to show results of a map in two or more columns using react

I think I have a simple question, but I can't get a solution to do this with react, I would like show results in two columns like:

item 1 | item 4
item 2 | item 5
item 3 | item 6

I tried verify if array lenght is 0 or new start column, but I can't draw a start div element without draw the end div element

I would like to do something like this:

render() {

        const secondColumnStart = this.props.result.length / 2;

        return <div className="row">
                {this.props.result.map((item, i) => 
                { (i == 0 || i == secondColumnStart) && <div className="col-md-6"> }
                    item.value
                { (i == 0 || i == secondColumnStart) && </div> })}
            </div>;
    }

Upvotes: 17

Views: 45910

Answers (7)

Eric Wilfer
Eric Wilfer

Reputation: 1

The simplest method with few lines of code for your question is

list.map((list, index)=>{
return index % 2 === 0 ?
  <Col xs={6}>
    {list}
  </Col>
  :
  <Col xs={6}>
  {list}
  </Col>

})

Upvotes: 0

Senthuran
Senthuran

Reputation: 1837

I also faced a similar problem where I need to show the results of an array into three columns in card. For that I have grouped the array elements into groups as below.

arr = ['a','b','c','d',e','f'] --------> arr = [['a','b','c'],['d','e','f']]

let modified_collection=[]
if (collection.length>0) {
         modified_collection = collection.reduce( (rows, key, index) =>{ 
            return (index % 3 === 0 ? rows.push([key]) 
              : rows[rows.length-1].push(key)) && rows;
          }, []);
        
    }

After grouping I have map the elements in the modified array as below.

modified_collection.map((row) =>
            <Row>
                {row.map(col => (<Col>
                    <Card
                        hoverable
                        style={{ width: 240, height : 480 }}
                        cover={<img alt="example" src={col.collection.image_url} />}
                    >
                        <Meta title={col.collection.title} description={col.collection.description} />
                    </Card>
                </Col>))}
            </Row>
            )

Upvotes: 0

Pramod Mali
Pramod Mali

Reputation: 1808

You can use the following code.

const Thingy = props => {
  const gridCols = [[],[]];
  const result = [10,20,30,40,50,60,70];
  
  result.forEach( ( data,i )=>{
        const comp = (
            <button value={data}>{data+" "}</button>
        );
        const colNumber = i % 2;
        gridCols[colNumber].push( comp );

    } );
        
  return (
      <div className="container">
          <div className="row">
              <div className="col-sm">
                  {gridCols[0]}
              </div>
              <div className="col-sm">
                  {gridCols[1]}
              </div>
          </div>
      </div>
    )
};



// Render it
ReactDOM.render(
  <Thingy title="I'm the thingy" />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Upvotes: 0

Bilal Khoukhi
Bilal Khoukhi

Reputation: 1040

Simply map items as you usually do from one array. With that, use the CSS property "columns" to display them as described in the question above.

.container {
  columns: 2 auto;
}

Upvotes: 41

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

Assuming two column's, having col-md-6 class for row splitting.

create stateless component myRow

const myRow = ({index})=>{(<div className="col-md-6">{index}</div>)}

create array for each cols

const col1 = [],col2 = [];

this.props.result.forEach((item, i) => {
    if(i%===0){
        col1.push(myRow);
    }else{
        col2.push(myRow);
    }
}

return the React element in render.

return <div className="row">
                {col1}{col2}
            </div>;

Upvotes: 9

Rebecca Tay
Rebecca Tay

Reputation: 331

Will there always be 2 columns, regardless of how many items you have? If there are 5 items, should it display as col A -> 1,2,3. col B -> 4,5? Use CSS to put the two columns side by side.

var halfwayPoint = Math.ceiling(this.props.result.length / 2)
var columnA = this.props.result.splice(0, halfwayPoint)
var columnB = this.props.result.splice(halfwayPoint)

render () {
  return (
    <div className='columnA'>
      {columnA.map((item, i) => {
          return (
           <div>{item.value}</div>
          )
        })
      }
    </div> 
    <div className='columnB'>
      {columnB.map((item, i) => {
          return (
           <div>{item.value}</div>
          )
        })
      }
    </div>
  )
}

Upvotes: 1

FuzzyTree
FuzzyTree

Reputation: 32392

If you always want exactly two columns, then one option is to call map twice. Once for each half of the array:

const secondColumnStart = Math.floor(this.props.result.length / 2);

return (
    <div className="row">
        <div className="col-md-6">
            {this.props.result.slice(0,secondColumnStart).map(item => item.value)}
        </div>
        <div className="col-md-6">
            {this.props.result.slice(secondColumnStart).map(item => item.value)}                
        </div>
    </div>
);

Upvotes: 7

Related Questions