Array nicht zuordnen - Reagieren

Question

Mein Array tabList wird nicht zu den <li> Tags zugeordnet, die ich brauche. Was habe ich falsch gemacht?

import React, { Component } from 'react' 
// import NeilProfile from './neil-profile.jpg' 
import Expertise from './expertise' 
import Work from './work' 
import Activity from './activity' 

export class Bottom extends Component { 

    constructor (props) { 
    super(props) 
    this.state = { currentTab: 1 } 
    this.changeTab = this.changeTab.bind(this) 
    } 

    changeTab (id) { 
     this.setState({ currentTab: id }) 
    } 

    render() { 

    const tabList = [ 
     { 'id': 1, 'name': 'Work' }, 
     { 'id': 2, 'name': 'Expertise' }, 
     { 'id': 3, 'name': 'Activity'} 
    ] 

    return (
     <div className='profile-bottom'> 
     <header> 
      <ul className='profile-bottom__tab-navigation'> 

      {tabList.map(function(tab) { 
      <li key={tab.id} className={(this.state.currentTab === tab.id) ? 'active' : null}> 
       <a onClick={() => this.changeTab(tab.id)} > 
        {tab.name} 
       </a> 
      </li> 
      }.bind(this))} 

      </ul> 

      <div className='profile-bottom__filter'> 
      <p>Show only: <span>Articles</span></p> 
      </div> 
     </header> 
     <div className='profile-bottom__content'> 
      {this.state.currentTab === 1 ? 
      <Work /> 
      :null} 

      {this.state.currentTab === 2 ? 
       <Expertise /> 
      :null} 

      {this.state.currentTab === 3 ? 
       <Activity /> 
      :null} 

     </div> 
     </div> 
    ) 
    } 
} 

export default Bottom 

Answer 1

Sie fehlen Rückkehr in Kartenfunktion. Aktualisieren Sie Ihre Karte Funktion wie diese -

return (<li key={tab.id} className={(this.state.currentTab === tab.id) ? 'active' : null}> 
       <a onClick={() => this.changeTab(tab.id)} > 
        {tab.name} 
       </a> 
</li>) 

Answer 2

Versuchen Sie irgendeine:

{ 
    tabList.map(tab => 
     <li key={tab.id} className={(this.state.currentTab === tab.id) ? 'active' : null}> 
      <a onClick={() => this.changeTab(tab.id)} > 
       {tab.name} 
      </a> 
     </li> 
} 

oder

{ 
    tabList.map(tab => { 
     return (
      <li key={tab.id} className={(this.state.currentTab === tab.id) ? 'active' : null}> 
       <a onClick={() => this.changeTab(tab.id)} > 
        {tab.name} 
       </a> 
      </li> 
     )} 
}