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?

Mayank Shukla · Accepted Answer · 2017-04-19 18:52:41Z

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'/>

Should not the code "return" the result of map function? Like return array.map...
no, map will return an array (its a property of map, it return an array of all the element that you returned from the body of map), that array will get rendered inside jsx, return is not required, is it not working ?
@FacundoLaRocca check the updated answer, how to use map inside jsx.

Facundo La Rocca · Accepted Answer · 2017-04-19 18:39:43Z

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')
);

Himanshu Soni · Accepted Answer · 2017-04-19 18:43:10Z

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')
);

Jose Cabrera Zuniga · Accepted Answer · 2017-04-19 19:18:51Z

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!!!

Collectives™ on Stack Overflow

Using loop to create elements in react

4 Answers 4

3 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Linked

Related