Не удается зациклить строки таблицы в таблице?

Question

let tableclientnamelist  = [];
        for(var i=0; i<tablecontractlist.length;i++){
            tableclientnamelist.push(
               <tr>
                   <td>
                      {tableclientname[i]}
                   </td>
               </tr>
            )
         }

    let tablecreatedbylist  = [];
        for(var i=0; i<tablecontractlist.length;i++){
            tablecreatedbylist.push(
               <tr>
                   <td>
                      {tablecreatedby[i]}
                   </td>
               </tr>
            )
         }

         let tablecontractvaluelist  = [];
        for(var i=0; i<tablecontractlist.length;i++){
            tablecontractvaluelist.push(
               <tr>
                   <td>
                      {tablecontractvalue[i]}
                   </td>
               </tr>
            )
         }

         let tablecreatedDatelist  = [];
        for(var i=0; i<tablecontractlist.length;i++){
            tablecreatedDatelist.push(
               <tr>
                   <td>
                      {tablecreatedDate[i]}
                   </td>
               </tr>
            )
         }  


          <table id="customers">
                                        <thead>
                                            <tr>
                                                <td>Client Name</td>
                                                 <td>Created By</td>
                                                  <td>Contract Value</td>
                                                   <td>Created Date</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {tableclientnamelist}
                                            {tablecreatedbylist}
                                            {tablecontractvaluelist}
                                            {tablecreatedDatelist}




                                        </tbody>
                                    </table>

результат изображения

У меня есть таблица, и мне нужны строки таблицы, основанные на именах массивов.показывая ошибку, могу ли я знать, что не так в этом или любом другом способе нужно реализовать

Я обновил изменения после вставки, все идут в столбце sigle вместо того, чтобы входить в 4 различных столбца, так как у меня есть 4 различных tds

Answer 1

В вашем render():

let list  = [];
for(let i=0; i<tablecontractlist.length;i++){
    list.push(
       <tr key={i}>
           <td>
              { tableclientname[i] }
           </td>
       </tr>
    )
 }

Затем в вашем return в tbody:

 <tbody>
      { list }
 </tbody>

Answer 2

В tbody вы просто отображаете значения без соответствующих tds к нему ... Только для вас информация ... Я добавил тот же список для стоимости контрактаи дату создания, если вам интересно, почему она отображает те же значения.

Sample code:

 state = {
 clientList: [{name: 'abc'}, {name: 'def'}],
 createdDateList: [{name: '01/02/2001'}, {name: '01/02/2010'}]

}

render methods for list:

const renderClientList = clientList.map((value, key) => {
            return <tr>
            <td>
               {value.name}
            </td>
        </tr>
        });

        const renderCreatedDateList = createdDateList.map((value, key) => {
            return <tr>
            <td>
               {value.name}
            </td>
        </tr>
        });


<table id="customers">
                                        <thead>
                                            <tr>
                                                <td>Client Name</td>
                                                 <td>Created By</td>
                                                  <td>Contract Value</td>
                                                   <td>Created Date</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <td>{renderClientList}</td>
                                            <td>{renderCreatedDateList}</td>
                                            <td>{renderClientList}</td>
                                            <td>{renderClientList}</td>




                                        </tbody>
                                    </table>

Надеюсь, это поможет :) .. пожалуйста, проверьте, как размещается renderClientList, а также я использовал карту: D

Answer 3

Вместо этого используйте .map.

измените данные таблицы с

<td>{for(var i=0; i<tablecontractlist.length;i++){
                tableclientname[i]
            }}</td>

на

{
  tablecontractlist.map((table, i) => {
    return (                
       <tr key={i}>
         <td>{tableclientname[i]}</td>
         <td>{tablecreatedby[i]}</td>
         <td>{tablecontractvalue[i]}</td>
         <td>{tablecreatedDate[i]}</td>
      </tr>
    )    
 })
}