- Rang Zählertabelle

Question

Zur Zeit arbeite ich an einem der FCC des Projekts, die speziell auf diese:

https://www.freecodecamp.com/challenges/build-a-camper-leaderboard

Ich war in der Lage, es zu bekommen funktioniert ganz gut - ich bin in der Lage zu klicken entweder aktuelle oder All-Time-Scores und es wird die Seite entsprechend neu gerendert.

Das einzige, was ich vermisst wird in geeigneter Weise den Rang Nummer zu machen. Ab jetzt ist es nur aktuelle Stapel Nummer 1.

Hier ist meine aktuellen Code:

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux' 
import { recentData } from '../actions/index' 
import { allTimeData } from '../actions/index' 

export default class TableBoard extends Component { 
    constructor(props){ 
    super(props); 
    } 
    componentDidMount() { 
    this.props.recentData() //fetch data most recent top 
    } 
    renderData(userData){ 
    const name = userData.username; 
    const recent = userData.recent; 
    const allTime = userData.alltime; 
    let rank = 1; 
    return(
     <tr key={name}> 
     <td>{rank}</td> 
     <td>{name}</td> 
     <td>{recent}</td> 
     <td>{allTime}</td> 
     </tr> 
    ) 
    } 
    getRecentData(){ 
    console.log('recent data') 
    this.props.recentData() 
    } 
    getAllTimeData(){ 
    console.log('all-time data') 
    this.props.allTimeData(); 
    } 
    render(){ 
    return(
     <table className="table table-hover"> 
     <thead> 
      <tr> 
      <th>#</th> 
      <th>Camper Name</th> 
      <th 
       onClick={this.getRecentData.bind(this)} 
       >Points in 30 days 
      </th> 
      <th 
       onClick={this.getAllTimeData.bind(this)} 
       >All-time Posts 
      </th> 
      </tr> 
     </thead> 
     <tbody> 
      {this.props.FCCData.map(this.renderData)} 
     </tbody> 
     </table> 
    ) 
    } 
} 
function mapStateToProps(state){ 
    return { 
    FCCData: state.collectData 
    } 
} 
function mapDispatchToProps(dispatch){ 
    return bindActionCreators({ recentData, allTimeData }, dispatch) 
} 

export default connect(mapStateToProps, mapDispatchToProps)(TableBoard); 

Wie kann ich zusätzliche Informationen in render Funktion hinzufügen, korrekt den Rang angezeigt werden? Ich nehme an, ich brauche einen Schalter?

Answer 1

Pass Index in Karte

renderData(item,index){ 
    const name = item.username; 
    const recent = item.recent; 
    const allTime = item.alltime; 
    return(
     <tr key={name}> 
     <td>{index+1}</td> 
     <td>{name}</td> 
     <td>{recent}</td> 
     <td>{allTime}</td> 
     </tr> 
    ) 
    } 

Tabelle Körper

<tbody> 
    {this.props.FCCData.map(this.renderData} 
</tbody>