React: Wie kann ich in einer Map-Schleife die Tabellenzeile aufteilen, nachdem vier Spalten gedruckt wurden?

Question

Wie drucke ich die folgende Tabellenstruktur mit einer Liste von Daten? Nehmen wir an, ich habe die folgende Liste von Städten.

cities = ['San Fransisco', 'Mumbai', 'Belarus', 'Kathmandu', 'Jakarta', 'Manila', 'Copenhagen', 'Tehran', 'Khartoum', 'Jeddah'] 

Ich brauche die Tabellenzeile zu brechen, nachdem alle vier Spalten gedruckt wurden, wie folgt:

<tr> 
    <td>San Fransisco</td> 
    <td>Mumbai</td> 
    <td>Belarus</td> 
    <td>Kathmandu</td> 
</tr> 
<tr> 
    <td>Jakarta</td> 
    <td>Manila</td> 
    <td>Copenhagen</td> 
    <td>Tehran</td> 
</tr> 
<tr> 
    <td>Khartoum</td> 
    <td>Jeddah</td> 
</tr> 

Hier ist, was ich versucht:

<table className="table"> 
    <thead> 
    <tr> 
     <th>Delivery Location</th> 
     <th></th> 
     <th></th> 
     <th></th> 
    </tr> 
    </thead> 
    <tbody> 

    {cities && cities.map((zone, i) => { return (
     {(i % 4 === 0) ? <tr key={i}> : null } 
     <td>{zone.name}</td> 
     {(i % 4 === 0) ? </tr> : null } 
    )})} 

    </tbody> 
</table> 

Aber meine IDE zeigt mehrere Syntax Fehler. Ich habe auch versucht, ein Wrapping Div um den Code hinzuzufügen, aber ich bekomme immer noch die Fehler.

Answer 1

Sie können die Arrays in ein Array von Arrays reduzieren jeweils 4 Elementen und haben dann eine verschachtelte Map-Struktur wie

class App extends React.Component { 
 
    state = { 
 
     rcities: ['San Fransisco', 'Mumbai', 'Belarus', 'Kathmandu', 'Jakarta', 'Manila', 'Copenhagen', 'Tehran', 'Khartoum', 'Jeddah'] 
 
    } 
 
    componentDidMount() { 
 
    
 
const size = 4; 
 
var rcities = [...this.state.rcities]; 
 
const res = rcities.reduce((acc, curr, i) => { 
 
    if (!(i % size) ) { // if index is 0 or can be divided by the `size`... 
 
    acc.push(rcities.slice(i, i + size)); // ..push a chunk of the original array to the accumulator 
 
    } 
 
    return acc; 
 
}, []); 
 

 
    this.setState({cities: res}) 
 
    } 
 
    render() { 
 
     console.log(this.state.cities) 
 
     return (
 
      <table className="table"> 
 
      <thead> 
 
       <tr> 
 
       <th>Delivery Location</th> 
 
       <th>a</th> 
 
       <th>b</th> 
 
       <th>c</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 

 
       {this.state.cities && this.state.cities.map((zone, i) => { return (
 
       <tr key={i}> 
 
        {zone.map((city, index) => { 
 
        return <td key={index}>{city}</td> 
 
        })} 
 
       </tr> 
 
        
 
       )})} 
 
      
 
      </tbody> 
 
      </table> 
 
     ) 
 
    } 
 
} 
 

 
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"></div>