प्रतिक्रिया में तत्व बनाने के लिए लूप का उपयोग करना

पहली बात यह है कि आप {} का उपयोग करना भूल गए हैं, यदि आप html तत्व के अंदर किसी भी js कोड का उपयोग कर रहे हैं तो आपको {} का उपयोग करने की आवश्यकता है।

आप loop का गलत तरीके से उपयोग कर रहे हैं, for लूप return कुछ भी नहीं करेगा, इसका उपयोग केवल array को पुनरावृत्त करने के लिए किया जाता है। इसके लिए map का प्रयोग करें, यह प्रत्येक तत्व के लिए 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>

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

       }

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

इस उदाहरण को देखें, map का उपयोग 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'/>

प्रतिक्रिया में काम करते समय आपको कुछ बातों पर ध्यान देने की आवश्यकता है - विशिष्ट होने के लिए JSX। मैं आपको अपने कोड के माध्यम से चलता हूं।

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

आपने मुझे जो भी विचार दिए हैं वे बहुत ही रोचक और बहुत उपयोगी हैं। बूटस्ट्रैपटेबल की प्रकृति को देखते हुए मुझे यह करना था:

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

पहले "isKey" घटक को सरणी में रखना और अन्य को Facundo La Roca के रूप में उल्लिखित करना। धन्यवाद!!!