How to render matrix table form array in react

Question

I have array data of character like

var charArray=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p'];

and want to generate matrix table of 4X4,

in javascript i would achieve the result as

var charArray=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p'];
var charindex=0;
for(var i=0;i<4;i++){
  var tr='<tr>';
  for(var p=0;p<4;p++){    
    tr+='<td>'+charArray[charindex]+'</td>';
    charindex++;
  }
  tr+='</tr>';
  $('#matrixTable').append(tr);
}

#matrixTable{
  border-collapse:collapse;
}
#matrixTable>tr>td{
  border:1px solid #000;
  padding:10px;
  text-align:center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table id="matrixTable"></table>
</div>

but it's getting hard to achieve in react, I have tried it like,

/*
 * A simple React component
 */
class Application extends React.Component {
  constructor(){
      super()
      this.state={
         charArray:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P']
      }
   }
  renderTable=()=>{
      let si=0
      let table
      for(let a=0;a<4;a++){
         table+=<tr key={a}>
             <td>{this.state.charArray[si+0]}</td>
             <td>{this.state.charArray[si+1]}</td>
             <td>{this.state.charArray[si+2]}</td>
             <td>{this.state.charArray[si+3]}</td>
          </tr>
         si=si+4
      }    
      return table  
   }
  render() {
    return <div>
      <h4>Matrix Table</h4>
      <table id="table">
        {this.renderTable()}
      </table>  
    </div>;
  }
}

/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.0/react-dom.min.js"></script>
<div id="app"></app>

How could i achieve it on React, any help would be greatly appreciated. Thank you in advance

Ori Drori · Accepted Answer · 2020-01-25 10:46:29Z

Your original code doesn't work because your are concatenating JSX (objects) with strings. When converting objects to strings you get the [object object] string. You need to render the table as JSX.

Since you know the number cols (predefined but should be from props/state), you can find the number of rows - const rows = Math.ceil(charArray.length / cols).

Now you can use Array.from() to slice to render the tr elements, and get the td values from the original array, and map them to cells:

return Array.from({ length: rows }, (_, i) => (
  <tr>
  {
    charArray.slice(i * cols, (i + 1) * cols)
      .map(c => <td>{c}</td>)
  }
  </tr>
))

class Application extends React.Component {
  constructor(){
      super()
      this.state={
         charArray:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P']
      }
   }
  renderTable=()=>{
    const { charArray = [] } = this.state
    
    const cols = 4 // should come from state or props    
    const rows = Math.ceil(charArray.length / cols)
    
    return Array.from({ length: rows }, (_, i) => (
      <tr>
      {
        charArray.slice(i * cols, (i + 1) * cols)
          .map(c => <td>{c}</td>)
      }
      </tr>
    ))
   }
  render() {
    return <div>
      <h4>Matrix Table</h4>
      <table id="table">
        {this.renderTable()}
      </table>  
    </div>;
  }
}

/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.0/react-dom.min.js"></script>
<div id="app"></app>

Collectives™ on Stack Overflow

How to render matrix table form array in react

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related