Using loop to create elements in react

Question

Based on the next working code:

var myfields = new Array('id', 'firstName', 'lastName')

const usersd = users;   


ReactDOM.render(
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true}  multiColumnSearch={ true } >
    <TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>
    <TableHeaderColumn dataField={myfields[1]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[1]}</TableHeaderColumn>
    <TableHeaderColumn dataField={myfields[2]} dataSort={ true }  width='15' dataAlign='left' headerAlign='left'>{myfields[2]}</TableHeaderColumn>
</BootstrapTable>,
document.getElementById('usersModTable')
);

I wanted to use a loop on those react commands that use an index. So I could use a loop like in:

var myfields = new Array('id', 'firstName', 'lastName')

const usersd = users;



ReactDOM.render(
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true}  multiColumnSearch={ true } >
    <TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>

    for(var i = 1;i<myfields.length;i++) {
        <TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>           
    }

</BootstrapTable>, document.getElementById('usersModTable')
);

So far this loop doesn't work, but, is there a working way to do something like this?

Answer 1

All the ideas you gave me are very interesting and very helpful. Given the nature of BootstrapTable I had to do:

var myfields = new Array('id', 'firstName', 'lastName')

const usersd = users;

let components = [<TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>];

for(var i = 1; i<myfields.length; i++) {
    components.push(<TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>);
}

ReactDOM.render(
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true}  multiColumnSearch={ true } >     

    {components}

</BootstrapTable>,
document.getElementById('usersModTable')
);

placing the first "isKey" component in the array and adding the others as Facundo La Roca mentioned. Thanks!!!

Answer 2

First thing is, you forgot to use {}, if you are using any js code inside html element you need to use {}.

You are using the loop in a wrong way, for loop will not return anything, it is used just to iterate the array. Use map for this, it will return the TableHeaderColumn for each element. Like this:

ReactDOM.render(
    <BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true}  multiColumnSearch={ true } >
        <TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>

       {
          myfields.map((el, i) => <TableHeaderColumn
                                      key={i} 
                                      dataField={el}  
                                      dataSort={ true } 
                                      width='15' 
                                      dataAlign='left' 
                                      headerAlign='left'>
                                      {el}
                                  </TableHeaderColumn> 

       }

   </BootstrapTable>, document.getElementById('usersModTable'));

Check this example, how to use map inside jsx:

var App = () => {
   return (
      <div>
          {
            [1,2,3,4].map(el => <p key={el} > {el} </p>)
          }
      </div>
   )
}

ReactDOM.render(<App/>, document.getElementById('app'))

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

<div id='app'/>

Answer 3

There are a couple things that you need to pay attention at while working in react - JSX to be specific. Let me walk you through your code.

ReactDOM.render(
// JSX starts here
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true}  multiColumnSearch={ true } >
    <TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>
    for(var i = 1;i<myfields.length;i++) {
        <TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>           
    }
    {
      // You can write javascript code here. However you need to ensure that this will return a react/html component.
     someCondition ?
     <span>positive</span> :
     <span>negative</span>
    }
    {
     // Now might will notice that the for loop that you have used above, doesnt return a valid JSX. To overcome that you need to use the *map* to iterate and return the jsx.
     myfields.map(function() {
      return <TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>
     })
    }
</BootstrapTable>
// JSX ends here
, document.getElementById('usersModTable')
);

Answer 4

Code proposed by Mayank Shukla is a pretty way to get what you want (I would do it in the same way). But if what you are looking for is to use loops, the way should be more or less like this:

var myfields = new Array('id', 'firstName', 'lastName')

const usersd = users;

let components = [];
for(var i = 1;i<myfields.length;i++) {
    components.push(<TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>);
}

ReactDOM.render(
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true}  multiColumnSearch={ true } >
    <TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>
    //for(var i = 1;i<myfields.length;i++) {
    //  <TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>;
    //}
    {components}
</BootstrapTable>, document.getElementById('usersModTable')
);

or

var myfields = new Array('id', 'firstName', 'lastName')

const usersd = users;

ReactDOM.render(
<BootstrapTable data={usersd} search={true} cellEdit={ cellEditProp } height='480px' scrollTop={ 'Bottom' } pagination={true}  multiColumnSearch={ true } >
    <TableHeaderColumn isKey dataField={myfields[0]} width='10' dataAlign='left'>{myfields[0]}</TableHeaderColumn>
    {
        let components = [];
        for(var i = 1;i<myfields.length;i++) {
            components.push(<TableHeaderColumn dataField={myfields[i]} dataSort={ true } width='15' dataAlign='left' headerAlign='left'>{myfields[i]}</TableHeaderColumn>);
        }
        return components;
    }
</BootstrapTable>, document.getElementById('usersModTable')
);