0

I am currently working on refactoring my existing javascript into a SharePoint Framework solution with REACT. I got most parts working but I am stumped on the Render function to return html contents for a table with a variable number of columns. The number of columns is set from a web part property. How can I convert the original javascript (below) into REACT code? 

var html = "<table>";        
for (var i = 0; i < data.d.results.length; i++) //data is from AJAX SP REST query
{
    if ((i % tdWidth) == 0 ) { html += "<tr>"; } //if this is the first column in the row

    html += "<td><div>" + data.d.results[i] + "</div></td>";

    if ((i % tdWidth) == (tdWidth - 1) ) { html += "</tr>"; } //if this is the last column in the row
}
html += "</table>";
$("#tableContainerDiv").html(html); //Set the html tag of the container div
Charlie C
  • 21
  • 5

1 Answers1

0

You have to create your own component to use. Check the below link.

http://buildwithreact.com/tutorial/components

OR

best thing in react is reuse the ready made component. instead of making the html from js try to use the react-super-responsive-table. https://www.npmjs.com/package/react-super-responsive-table You can easily loop through rows and count with headers. I hope it may help you.

OR

Another approach is to set the response into array i.e. data.d.results put in array and render your control inside the render method.

MyrenderItems = this.state.UserArray.map(function (item, i) { ..... }

AbdulAzizFarooqi
  • 111
  • 6