Erreur lors de la tentative de séchage de ce code de réaction (jsx)

Question

Il s'agit d'un projet de réaction et le code ci-dessous est jsx. Code J'essaie de sécher ci-dessous. Ça marche bien mais c'est long!

const rightIcons = (
      <div> 
       <a href="#"> 
        <FontIcon 
         className="material-icons" 
         style={iconStyles} 
         onClick={() => this.props.scrollCallback('frontend')} 
        > 
         important_devices 
        </FontIcon> 
       </a> 
       <a href="#"> 
        <FontIcon 
         className="material-icons" 
         style={iconStyles} 
         onClick={() => this.props.scrollCallback('backend')} 
        > 
         dns 
        </FontIcon> 
       </a> 
       <a href="#"> 
        <FontIcon 
         className="material-icons" 
         style={iconStyles} 
         onClick={() => this.props.scrollCallback('withCare')} 
        > 
         favorite 
        </FontIcon> 
       </a> 
     ... 
      </div> 
     ); 

c'est ma tentative de boucle à travers elle

const iconFields = [ 
     { icon: 'important_devices', component: 'frontend' }, 
     { icon: 'dns', component: 'backend' }, 
     { icon: 'favorite', component: 'withCare' }, 
     { icon: 'code', component: 'projects' }, 
     { icon: 'face', component: 'contact' } 
    ]; 
{iconFields.map(function(icon, i) { 
        return (
         <a href="#" key={i}> 
          <FontIcon 
           className="material-icons" 
           style={iconStyles} 
           onClick={() => this.props.scrollCallback(icon.component)} 
          > 
           {icon.icon} 
          </FontIcon> 
         </a> 
        ); 
       })} 

J'ai essayé le « icon.component » quelques façons différentes mais il provoque toujours une erreur. Le "icon.icon" fonctionne bien

Answer 1

code final pour toute personne ayant un problème similaire. Merci à Prakash sharma!

const iconFields = [ 
      { icon: 'important_devices', component: 'frontend' }, 
      { icon: 'dns', component: 'backend' }, 
      { icon: 'favorite', component: 'withCare' }, 
      { icon: 'code', component: 'projects' }, 
      { icon: 'face', component: 'contact' } 
     ]; 
     const rightIcons = (
      <div> 
       {iconFields.map((icon, i) => { 
        return (
         <a href="#" key={i}> 
          <FontIcon 
           className="material-icons" 
           style={iconStyles} 
           onClick={() => this.props.scrollCallback(icon.component)} 
          > 
           {icon.icon} 
          </FontIcon> 
         </a> 
        ); 
       })}